@stenajs-webui/elements - npm Package Compare versions

Comparing version 1.0.0-alpha.0 to 1.0.0-alpha.1

dist/components/ui/link/Link.d.ts

@@ -6,4 +6,5 @@ import * as React from "react";
     disabled?: boolean;
+    disableTabIndex?: boolean;
 }
 export declare const Link: React.FC<Props>;
 export {};

dist/index.es.js

@@ -43,3 +43,3 @@ import { keyframes, ClassNames } from '@emotion/core';
 
-var css$1 = ":root {\n    /* Text colors */\n  --swui-text-primary-color: #1b2e47;\n  --swui-text-primary-color-light: #bcbabd;\n  --swui-text-disabled-color: #b6b6b6;\n  --swui-text-darkmode-primary-color: #bcbabd;\n  --swui-text-darkmode-disabled-color: #dddddd;\n\n  /* Generic colors */\n  --swui-white: #fff;\n  --swui-hidden: rgba(0, 0, 0, 0);\n  --swui-primary-action-color: var(--lhds-color-blue-500);\n  --swui-primary-action-color-active: var(--lhds-color-blue-800);\n  --swui-primary-action-color-focus: var(--lhds-color-blue-700);\n  --swui-primary-action-color-hover: var(--lhds-color-blue-600);\n  --swui-primary-action-color-disabled: var(--lhds-color-ui-300);\n  --swui-separator-color: #b1b1b1;\n  --swui-handle-bg-enabled-color: var(--swui-white);\n  --swui-handle-bg-disabled-color: #bebbc0;\n  --swui-modal-border-color: #bebbc0;\n  --swui-overlay-bg-color: rgba(0, 0, 0, 0.5);\n\n  /* State colors */\n  --swui-state-error-color: #d05353;\n  --swui-state-error-light-color: #fff1f4;\n  --swui-state-alert-color: #ffa400;\n  --swui-state-alert-light-color: #fff8eb;\n  --swui-state-success-color: #60bd2f;\n  --swui-state-success-light-color: #94f78c;\n  --swui-state-modified-color: var(--swui-primary-action-color);\n  --swui-state-modified-light-color: #e2edf7;\n  --swui-state-loading-color: #ced0d7;\n  --swui-state-loading-light-color: #fafafb;\n\n  /* Fonts */\n  --swui-font-primary: \"Open Sans\", system-ui;\n  --swui-font-buttons: var(--swui-font-primary);\n  --swui-font-input: var(--swui-font-primary);\n  --swui-font-size-inputs: 14px;\n  --swui-font-size-small: 10px;\n  --swui-font-weight-inputs: 400;\n\n  /* Animation speeds */\n  --swui-animation-time-fast: 0.1s;\n  --swui-animation-time-medium: 0.25s;\n  --swui-animation-time-slow: 0.5s;\n\n  /* Form fields */\n  --swui-field-text-color: #424551;\n  --swui-field-text-color-disabled: #989cab;\n  --swui-field-text-spacing: 6px;\n  --swui-field-letter-spacing: -0.34px;\n  --swui-field-text-line-height: 20px;\n  --swui-field-bg-enabled: var(--swui-white);\n  --swui-field-bg-disabled: #e8e4ea;\n  --swui-field-border-color: #bbc1e1;\n  --swui-field-border-color-hover: #275efe;\n  --swui-field-border-color-disabled: var(--swui-separator-color);\n  --swui-field-shadow-color: rgba(0, 0, 0, 0.15);\n  --swui-field-box-size-large: 32px;\n  --swui-field-box-size-medium: 24px;\n  --swui-field-box-size-small: 16px;\n  --swui-field-border-radius: 4px;\n  --swui-field-icon-color: var(--swui-text-primary-color);\n  --swui-field-icon-size: 13px;\n  --swui-field-indicator-active-color: var(--swui-white);\n  --swui-field-indicator-inactive-color: var(--swui-hidden);\n\n  /* Borders */\n  --swui-border-radius: 4px;\n\n  /* Shadows */\n  --swui-shadow-modal: rgba(0, 0, 0, 0.2) 0px 0px 10px 4px;\n  --swui-shadow-popover: rgba(0, 0, 0, 0.2) 0px 0px 6px 4px;\n  --swui-shadow-box: rgba(0, 0, 0, 0.15) 0 2px 4px 0;\n  --swui-field-focus-shadow: inset 0px 0px 3pt 0pt rgba(0, 0, 100, 0.3);\n\n  /* Metrics */\n  --swui-metrics-indent: 8px;\n  --swui-metrics-spacing: 8px;\n  --swui-metrics-space: 8px;\n}\n";
+var css$1 = ":root {\n    /* Text colors */\n  --swui-text-primary-color: #1b2e47;\n  --swui-text-primary-color-light: #bcbabd;\n  --swui-text-disabled-color: #b6b6b6;\n  --swui-text-darkmode-primary-color: #bcbabd;\n  --swui-text-darkmode-disabled-color: #dddddd;\n\n  /* Generic colors */\n  --swui-white: #fff;\n  --swui-hidden: rgba(0, 0, 0, 0);\n  --swui-primary-action-color: var(--lhds-color-blue-500);\n  --swui-primary-action-color-active: var(--lhds-color-blue-800);\n  --swui-primary-action-color-focus: var(--lhds-color-blue-700);\n  --swui-primary-action-color-hover: var(--lhds-color-blue-600);\n  --swui-primary-action-color-disabled: var(--lhds-color-ui-300);\n  --swui-separator-color: #b1b1b1;\n  --swui-handle-bg-enabled-color: var(--swui-white);\n  --swui-handle-bg-disabled-color: #bebbc0;\n  --swui-modal-border-color: #bebbc0;\n  --swui-overlay-bg-color: rgba(0, 0, 0, 0.5);\n\n  /* State colors */\n  --swui-state-error-color: #d05353;\n  --swui-state-error-light-color: #fff1f4;\n  --swui-state-alert-color: #ffa400;\n  --swui-state-alert-light-color: #fff8eb;\n  --swui-state-success-color: #60bd2f;\n  --swui-state-success-light-color: #94f78c;\n  --swui-state-modified-color: var(--swui-primary-action-color);\n  --swui-state-modified-light-color: #e2edf7;\n  --swui-state-loading-color: #ced0d7;\n  --swui-state-loading-light-color: #fafafb;\n\n  /* Fonts */\n  --swui-font-primary: \"Open Sans\", system-ui;\n  --swui-font-weight-text: 400;\n  --swui-font-weight-link: 600;\n  --swui-font-buttons: var(--swui-font-primary);\n  --swui-font-input: var(--swui-font-primary);\n  --swui-font-size-inputs: 14px;\n  --swui-font-size-small: 10px;\n  --swui-font-weight-inputs: 400;\n\n  /* Animation speeds */\n  --swui-animation-time-fast: 0.1s;\n  --swui-animation-time-medium: 0.25s;\n  --swui-animation-time-slow: 0.5s;\n\n  /* Form fields */\n  --swui-field-text-color: #424551;\n  --swui-field-text-color-disabled: #989cab;\n  --swui-field-text-spacing: 6px;\n  --swui-field-letter-spacing: -0.34px;\n  --swui-field-text-line-height: 20px;\n  --swui-field-bg-enabled: var(--swui-white);\n  --swui-field-bg-disabled: #e8e4ea;\n  --swui-field-border-color: #bbc1e1;\n  --swui-field-border-color-hover: #275efe;\n  --swui-field-border-color-disabled: var(--swui-separator-color);\n  --swui-field-shadow-color: rgba(0, 0, 0, 0.15);\n  --swui-field-box-size-large: 32px;\n  --swui-field-box-size-medium: 24px;\n  --swui-field-box-size-small: 16px;\n  --swui-field-border-radius: 4px;\n  --swui-field-icon-color: var(--swui-text-primary-color);\n  --swui-field-icon-size: 13px;\n  --swui-field-indicator-active-color: var(--swui-white);\n  --swui-field-indicator-inactive-color: var(--swui-hidden);\n\n  /* Borders */\n  --swui-border-radius: 4px;\n\n  /* Shadows */\n  --swui-shadow-modal: rgba(0, 0, 0, 0.2) 0px 0px 10px 4px;\n  --swui-shadow-popover: rgba(0, 0, 0, 0.2) 0px 0px 6px 4px;\n  --swui-shadow-box: rgba(0, 0, 0, 0.15) 0 2px 4px 0;\n  --swui-field-focus-shadow: inset 0px 0px 3pt 0pt rgba(0, 0, 100, 0.3);\n\n  /* Metrics */\n  --swui-metrics-indent: 8px;\n  --swui-metrics-spacing: 8px;\n  --swui-metrics-space: 8px;\n}\n";
 styleInject(css$1);
@@ -256,3 +256,3 @@
 
-var css$7 = ".Link-module_link__2PdX5 {\n  --swui-link-color: var(--swui-primary-action-color);\n  --swui-link-color-hover: var(--swui-primary-action-color-hover);\n  --swui-link-color-active: var(--swui-primary-action-color-active);\n  --swui-link-color-focus: var(--swui-primary-action-color);\n  --swui-link-color-disabled: var(--swui-text-disabled-color);\n\n  /*\n   * Styling\n   */\n  color: var(--swui-link-color);\n}\n\n  .Link-module_link__2PdX5:not(.Link-module_disabled__1OQi7) {\n    cursor: pointer;\n  }\n\n  .Link-module_link__2PdX5:not(.Link-module_disabled__1OQi7):hover,\n    .Link-module_link__2PdX5:not(.Link-module_disabled__1OQi7):active,\n    .Link-module_link__2PdX5:not(.Link-module_disabled__1OQi7):focus {\n      text-decoration: underline;\n    }\n\n  .Link-module_link__2PdX5:hover {\n    color: var(--swui-link-color-hover);\n  }\n\n  .Link-module_link__2PdX5:active {\n    color: var(--swui-link-color-active);\n  }\n\n  .Link-module_link__2PdX5.Link-module_disabled__1OQi7 {\n    color: var(--swui-link-color-disabled);\n  }\n\n  .Link-module_link__2PdX5:focus {\n    outline: none;\n    color: var(--swui-link-color-focus);\n  }\n";
+var css$7 = ".Link-module_link__2PdX5 {\n  --swui-link-font-family: var(--swui-font-primary);\n  --swui-link-text-decoration: underline;\n  --swui-link-font-weight: var(--swui-font-weight-link);\n  --swui-link-color: var(--swui-primary-action-color);\n  --swui-link-color-hover: var(--swui-primary-action-color-hover);\n  --swui-link-color-active: var(--swui-primary-action-color-active);\n  --swui-link-color-focus: var(--swui-primary-action-color-focus);\n  --swui-link-color-disabled: var(--swui-text-disabled-color);\n  --swui-link-focus-highlight-color: var(--lhds-color-blue-300);\n  --swui-link-focus-highlight-color-disabled: var(--swui-link-color-disabled);\n\n  /*\n   * Private vars\n   */\n  --current-text-color: var(--swui-link-color);\n  --current-focus-highlight-color: transparent;\n\n  /*\n   * Styling\n   */\n  color: var(--current-text-color);\n  font-family: var(--swui-link-font-family);\n  font-weight: var(--swui-link-font-weight);\n  box-sizing: border-box;\n  border: 1px solid var(--current-focus-highlight-color);\n  -webkit-text-decoration: var(--swui-link-text-decoration);\n          text-decoration: var(--swui-link-text-decoration);\n}\n\n  .Link-module_link__2PdX5:not(.Link-module_disabled__1OQi7) {\n    cursor: pointer;\n  }\n\n  .Link-module_link__2PdX5:focus {\n    outline: none;\n  }\n\n  .Link-module_link__2PdX5:focus:not(:active) {\n      --current-focus-highlight-color: var(--swui-link-focus-highlight-color);\n      cursor: pointer;\n    }\n\n  .Link-module_link__2PdX5:focus.Link-module_disabled__1OQi7 {\n      --current-focus-highlight-color: var(\n        --swui-link-focus-highlight-color-disabled\n      );\n      cursor: default;\n    }\n\n  .Link-module_link__2PdX5:hover {\n    --current-text-color: var(--swui-link-color-hover);\n  }\n\n  .Link-module_link__2PdX5:active {\n    --current-text-color: var(--swui-link-color-active);\n  }\n\n  .Link-module_link__2PdX5.Link-module_disabled__1OQi7 {\n    --current-text-color: var(--swui-link-color-disabled);\n  }\n";
 var styles$5 = {"link":"Link-module_link__2PdX5","disabled":"Link-module_disabled__1OQi7"};
@@ -262,3 +262,3 @@ styleInject(css$7);
 var Link = function (_a) {
-    var children = _a.children, className = _a.className, onClick = _a.onClick, _b = _a.tabIndex, tabIndex = _b === void 0 ? 0 : _b, disabled = _a.disabled, spanProps = __rest(_a, ["children", "className", "onClick", "tabIndex", "disabled"]);
+    var children = _a.children, className = _a.className, onClick = _a.onClick, _b = _a.tabIndex, tabIndex = _b === void 0 ? 0 : _b, disableTabIndex = _a.disableTabIndex, disabled = _a.disabled, spanProps = __rest(_a, ["children", "className", "onClick", "tabIndex", "disableTabIndex", "disabled"]);
     var onKeyDown = function (ev) {
@@ -270,6 +270,6 @@ if ((ev.key === " " || ev.key === "Enter") && onClick) {
     };
-    return (createElement("span", __assign({ role: "link", tabIndex: tabIndex, className: cx(styles$5.link, disabled && styles$5.disabled, className), onClick: !disabled ? onClick : undefined, onKeyDown: onKeyDown }, spanProps), children));
+    return (createElement("span", __assign({ role: "link", tabIndex: !disableTabIndex ? tabIndex : undefined, className: cx(styles$5.link, disabled && styles$5.disabled, className), onClick: !disabled ? onClick : undefined, onKeyDown: !disabled ? onKeyDown : undefined }, spanProps), children));
 };
 
-var css$8 = ".Chip-module_chip__3Uf1d {\n  --swui-chip-line-height: 16px;\n  --swui-chip-font-size: 12px;\n  --swui-chip-letter-spacing: -0.2px;\n  --swui-chip-height: 24px;\n  --swui-chip-bg-color: var(--swui-primary-action-color);\n  --swui-chip-text-color-primary: var(--swui-white);\n  --swui-chip-text-color-secondary: var(--lhds-color-blue-800);\n  --swui-chip-border-radius: var(--swui-border-radius);\n  --swui-chip-shadow: var(--swui-border-radius);\n\n  /* Border */\n  --swui-chip-border-color-primary: var(--swui-primary-action-color);\n  --swui-chip-border-color-secondary: var(--lhds-color-blue-300);\n\n  --current-icon-color: var(--swui-chip-bg-color);\n  --current-bg-color: var(--lhds-color-blue-50);\n\n  /*\n   * Styling\n   */\n  box-sizing: border-box;\n  display: -webkit-inline-box;\n  display: inline-flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n          flex-direction: row;\n  -webkit-box-align: center;\n          align-items: center;\n  height: var(--swui-chip-height);\n\n  box-shadow: var(--swui-chip-shadow);\n  border-radius: var(--swui-chip-border-radius);\n  padding-left: var(--swui-metrics-space);\n  padding-right: calc(var(--swui-metrics-space) / 2);\n  background-color: var(--current-bg-color);\n}\n\n  .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i {\n    border: 1px solid var(--swui-chip-border-color-primary);\n    --current-bg-color: var(--swui-chip-bg-color);\n    --current-icon-color: var(--swui-white);\n  }\n\n  .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i .Chip-module_label__3gHgv {\n      --swui-link-color: var(--swui-chip-text-color-primary);\n      --swui-link-color-hover: var(--swui-chip-text-color-primary);\n      --swui-link-color-active: var(--swui-chip-text-color-primary);\n      --swui-link-color-focus: var(--swui-chip-text-color-primary);\n      --swui-link-color-disabled: var(--swui-chip-text-color-primary);\n    }\n\n  .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i .Chip-module_close__2uEi1 {\n      --swui-button-background-color-hover: var(\n        --swui-primary-action-color-hover\n      );\n      --swui-button-background-color-focus: var(\n        --swui-primary-action-color-focus\n      );\n      --swui-button-background-color-active: var(\n        --swui-primary-action-color-active\n      );\n    }\n\n  .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY {\n    border: 1px solid var(--swui-chip-border-color-secondary);\n    --current-bg-color: var(--lhds-color-blue-50);\n    --current-icon-color: var(--swui-chip-text-color-secondary);\n  }\n\n  .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY .Chip-module_label__3gHgv {\n      --swui-link-color: var(--swui-chip-text-color-secondary);\n      --swui-link-color-active: var(--swui-chip-text-color-secondary);\n      --swui-link-color-hover: var(--swui-chip-text-color-secondary);\n      --swui-link-color-focus: var(--swui-chip-text-color-secondary);\n      --swui-link-color-disabled: var(--swui-chip-text-color-secondary);\n    }\n\n  .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY .Chip-module_close__2uEi1 {\n      --swui-button-background-color-active: var(--lhds-color-blue-400);\n      --swui-button-background-color-focus: var(--lhds-color-blue-300);\n      --swui-button-background-color-hover: var(--lhds-color-blue-200);\n    }\n\n  .Chip-module_chip__3Uf1d.Chip-module_removable__1fyEM {\n    padding-right: calc(var(--swui-metrics-space) / 2);\n  }\n\n  /*\n   * Specifying the class twice gives the css rule more specificity which\n   * makes it possible to override properties without having to use !important\n   */\n\n  .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv.Chip-module_label__3gHgv {\n    font-size: var(--swui-chip-font-size);\n    letter-spacing: var(--swui-chip-letter-spacing);\n    line-height: var(--swui-chip-line-height);\n    padding-right: calc(var(--swui-metrics-space) / 2);\n  }\n\n  .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv.Chip-module_label__3gHgv.Chip-module_clickable__3zjMU {\n      cursor: pointer;\n    }\n\n  .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv.Chip-module_label__3gHgv.Chip-module_clickable__3zjMU:hover {\n        text-decoration: underline;\n      }\n\n  .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1.Chip-module_close__2uEi1 {\n    width: 16px;\n    height: 16px;\n  }\n\n  .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1.Chip-module_close__2uEi1 svg {\n      color: var(--current-icon-color);\n      margin-top: -1px;\n      width: 10px;\n      height: 10px;\n    }\n";
+var css$8 = ".Chip-module_chip__3Uf1d {\n  --swui-chip-line-height: 16px;\n  --swui-chip-font-size: 12px;\n  --swui-chip-letter-spacing: -0.2px;\n  --swui-chip-height: 24px;\n  --swui-chip-bg-color: var(--swui-primary-action-color);\n  --swui-chip-text-color-primary: var(--swui-white);\n  --swui-chip-text-color-secondary: var(--lhds-color-blue-800);\n  --swui-chip-border-radius: var(--swui-border-radius);\n  --swui-chip-shadow: var(--swui-border-radius);\n\n  /* Border */\n  --swui-chip-border-color-primary: var(--swui-primary-action-color);\n  --swui-chip-border-color-secondary: var(--lhds-color-blue-300);\n\n  --current-icon-color: var(--swui-chip-bg-color);\n  --current-bg-color: var(--lhds-color-blue-50);\n\n  /*\n   * Styling\n   */\n  box-sizing: border-box;\n  display: -webkit-inline-box;\n  display: inline-flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n          flex-direction: row;\n  -webkit-box-align: center;\n          align-items: center;\n  height: var(--swui-chip-height);\n\n  box-shadow: var(--swui-chip-shadow);\n  border-radius: var(--swui-chip-border-radius);\n  padding-left: var(--swui-metrics-space);\n  padding-right: calc(var(--swui-metrics-space) / 2);\n  background-color: var(--current-bg-color);\n}\n\n  .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i {\n    border: 1px solid var(--swui-chip-border-color-primary);\n    --current-bg-color: var(--swui-chip-bg-color);\n    --current-icon-color: var(--swui-white);\n  }\n\n  .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i .Chip-module_label__3gHgv {\n      --swui-link-color: var(--swui-chip-text-color-primary);\n      --swui-link-color-hover: var(--swui-chip-text-color-primary);\n      --swui-link-color-active: var(--swui-chip-text-color-primary);\n      --swui-link-color-focus: var(--swui-chip-text-color-primary);\n      --swui-link-color-disabled: var(--swui-chip-text-color-primary);\n      --swui-link-focus-highlight-color: var(--swui-chip-text-color-primary);\n    }\n\n  .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i .Chip-module_close__2uEi1 {\n      --swui-button-background-color-hover: var(\n        --swui-primary-action-color-hover\n      );\n      --swui-button-background-color-focus: var(\n        --swui-primary-action-color-focus\n      );\n      --swui-button-background-color-active: var(\n        --swui-primary-action-color-active\n      );\n    }\n\n  .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i .Chip-module_close__2uEi1:focus {\n        --swui-button-box-shadow-focus: 0 0 3px 1px var(--swui-white);\n      }\n\n  .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY {\n    border: 1px solid var(--swui-chip-border-color-secondary);\n    --current-bg-color: var(--lhds-color-blue-50);\n    --current-icon-color: var(--swui-chip-text-color-secondary);\n  }\n\n  .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY .Chip-module_label__3gHgv {\n      --swui-link-color: var(--swui-chip-text-color-secondary);\n      --swui-link-color-active: var(--swui-chip-text-color-secondary);\n      --swui-link-color-hover: var(--swui-chip-text-color-secondary);\n      --swui-link-color-focus: var(--swui-chip-text-color-secondary);\n      --swui-link-color-disabled: var(--swui-chip-text-color-secondary);\n      --swui-link-focus-highlight-color: var(--swui-chip-text-color-secondary);\n    }\n\n  .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY .Chip-module_close__2uEi1 {\n      --swui-button-background-color-active: var(--lhds-color-blue-400);\n      --swui-button-background-color-focus: var(--lhds-color-blue-300);\n      --swui-button-background-color-hover: var(--lhds-color-blue-200);\n    }\n\n  .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY .Chip-module_close__2uEi1:focus {\n        --swui-button-box-shadow-focus: 0 0 3px 1px\n          var(--swui-chip-text-color-secondary);\n      }\n\n  .Chip-module_chip__3Uf1d.Chip-module_removable__1fyEM {\n    padding-right: calc(var(--swui-metrics-space) / 2);\n  }\n\n  /*\n   * Specifying the class twice gives the css rule more specificity which\n   * makes it possible to override properties without having to use !important\n   */\n\n  .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv.Chip-module_label__3gHgv {\n    font-size: var(--swui-chip-font-size);\n    letter-spacing: var(--swui-chip-letter-spacing);\n    line-height: var(--swui-chip-line-height);\n    padding-right: calc(var(--swui-metrics-space) / 2);\n    --swui-link-text-decoration: none;\n    --swui-link-focus-highlight-color-disabled: transparent;\n  }\n\n  .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv.Chip-module_label__3gHgv.Chip-module_clickable__3zjMU {\n      cursor: pointer;\n    }\n\n  .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv.Chip-module_label__3gHgv.Chip-module_clickable__3zjMU:hover,\n      .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv.Chip-module_label__3gHgv.Chip-module_clickable__3zjMU:focus {\n        text-decoration: underline;\n      }\n\n  .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1.Chip-module_close__2uEi1 {\n    width: 16px;\n    height: 16px;\n  }\n\n  .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1.Chip-module_close__2uEi1 svg {\n      color: var(--current-icon-color);\n      margin-top: -1px;\n      width: 10px;\n      height: 10px;\n    }\n";
 var styles$6 = {"chip":"Chip-module_chip__3Uf1d","primary":"Chip-module_primary__3kb_i","label":"Chip-module_label__3gHgv","close":"Chip-module_close__2uEi1","secondary":"Chip-module_secondary__2hWgY","removable":"Chip-module_removable__1fyEM","clickable":"Chip-module_clickable__3zjMU"};
@@ -288,3 +288,3 @@ styleInject(css$8);
     return (createElement("div", { className: cx(styles$6.chip, styles$6[variant], onClickRemove ? styles$6.removable : undefined) },
-        createElement(Link, { disabled: !onClick, onClick: onClickHandler, className: cx(styles$6.label, onClick ? styles$6.clickable : undefined) }, label),
+        createElement(Link, { disabled: !onClick, onClick: onClickHandler, disableTabIndex: !onClick, className: cx(styles$6.label, onClick ? styles$6.clickable : undefined) }, label),
         onClickRemove && (createElement(FlatButton, { leftIcon: faTimes, size: "small", className: styles$6.close, onClick: onClickRemove }))));
@@ -291,0 +291,0 @@ };

dist/index.js

@@ -50,3 +50,3 @@ 'use strict';
 
-var css$1 = ":root {\n    /* Text colors */\n  --swui-text-primary-color: #1b2e47;\n  --swui-text-primary-color-light: #bcbabd;\n  --swui-text-disabled-color: #b6b6b6;\n  --swui-text-darkmode-primary-color: #bcbabd;\n  --swui-text-darkmode-disabled-color: #dddddd;\n\n  /* Generic colors */\n  --swui-white: #fff;\n  --swui-hidden: rgba(0, 0, 0, 0);\n  --swui-primary-action-color: var(--lhds-color-blue-500);\n  --swui-primary-action-color-active: var(--lhds-color-blue-800);\n  --swui-primary-action-color-focus: var(--lhds-color-blue-700);\n  --swui-primary-action-color-hover: var(--lhds-color-blue-600);\n  --swui-primary-action-color-disabled: var(--lhds-color-ui-300);\n  --swui-separator-color: #b1b1b1;\n  --swui-handle-bg-enabled-color: var(--swui-white);\n  --swui-handle-bg-disabled-color: #bebbc0;\n  --swui-modal-border-color: #bebbc0;\n  --swui-overlay-bg-color: rgba(0, 0, 0, 0.5);\n\n  /* State colors */\n  --swui-state-error-color: #d05353;\n  --swui-state-error-light-color: #fff1f4;\n  --swui-state-alert-color: #ffa400;\n  --swui-state-alert-light-color: #fff8eb;\n  --swui-state-success-color: #60bd2f;\n  --swui-state-success-light-color: #94f78c;\n  --swui-state-modified-color: var(--swui-primary-action-color);\n  --swui-state-modified-light-color: #e2edf7;\n  --swui-state-loading-color: #ced0d7;\n  --swui-state-loading-light-color: #fafafb;\n\n  /* Fonts */\n  --swui-font-primary: \"Open Sans\", system-ui;\n  --swui-font-buttons: var(--swui-font-primary);\n  --swui-font-input: var(--swui-font-primary);\n  --swui-font-size-inputs: 14px;\n  --swui-font-size-small: 10px;\n  --swui-font-weight-inputs: 400;\n\n  /* Animation speeds */\n  --swui-animation-time-fast: 0.1s;\n  --swui-animation-time-medium: 0.25s;\n  --swui-animation-time-slow: 0.5s;\n\n  /* Form fields */\n  --swui-field-text-color: #424551;\n  --swui-field-text-color-disabled: #989cab;\n  --swui-field-text-spacing: 6px;\n  --swui-field-letter-spacing: -0.34px;\n  --swui-field-text-line-height: 20px;\n  --swui-field-bg-enabled: var(--swui-white);\n  --swui-field-bg-disabled: #e8e4ea;\n  --swui-field-border-color: #bbc1e1;\n  --swui-field-border-color-hover: #275efe;\n  --swui-field-border-color-disabled: var(--swui-separator-color);\n  --swui-field-shadow-color: rgba(0, 0, 0, 0.15);\n  --swui-field-box-size-large: 32px;\n  --swui-field-box-size-medium: 24px;\n  --swui-field-box-size-small: 16px;\n  --swui-field-border-radius: 4px;\n  --swui-field-icon-color: var(--swui-text-primary-color);\n  --swui-field-icon-size: 13px;\n  --swui-field-indicator-active-color: var(--swui-white);\n  --swui-field-indicator-inactive-color: var(--swui-hidden);\n\n  /* Borders */\n  --swui-border-radius: 4px;\n\n  /* Shadows */\n  --swui-shadow-modal: rgba(0, 0, 0, 0.2) 0px 0px 10px 4px;\n  --swui-shadow-popover: rgba(0, 0, 0, 0.2) 0px 0px 6px 4px;\n  --swui-shadow-box: rgba(0, 0, 0, 0.15) 0 2px 4px 0;\n  --swui-field-focus-shadow: inset 0px 0px 3pt 0pt rgba(0, 0, 100, 0.3);\n\n  /* Metrics */\n  --swui-metrics-indent: 8px;\n  --swui-metrics-spacing: 8px;\n  --swui-metrics-space: 8px;\n}\n";
+var css$1 = ":root {\n    /* Text colors */\n  --swui-text-primary-color: #1b2e47;\n  --swui-text-primary-color-light: #bcbabd;\n  --swui-text-disabled-color: #b6b6b6;\n  --swui-text-darkmode-primary-color: #bcbabd;\n  --swui-text-darkmode-disabled-color: #dddddd;\n\n  /* Generic colors */\n  --swui-white: #fff;\n  --swui-hidden: rgba(0, 0, 0, 0);\n  --swui-primary-action-color: var(--lhds-color-blue-500);\n  --swui-primary-action-color-active: var(--lhds-color-blue-800);\n  --swui-primary-action-color-focus: var(--lhds-color-blue-700);\n  --swui-primary-action-color-hover: var(--lhds-color-blue-600);\n  --swui-primary-action-color-disabled: var(--lhds-color-ui-300);\n  --swui-separator-color: #b1b1b1;\n  --swui-handle-bg-enabled-color: var(--swui-white);\n  --swui-handle-bg-disabled-color: #bebbc0;\n  --swui-modal-border-color: #bebbc0;\n  --swui-overlay-bg-color: rgba(0, 0, 0, 0.5);\n\n  /* State colors */\n  --swui-state-error-color: #d05353;\n  --swui-state-error-light-color: #fff1f4;\n  --swui-state-alert-color: #ffa400;\n  --swui-state-alert-light-color: #fff8eb;\n  --swui-state-success-color: #60bd2f;\n  --swui-state-success-light-color: #94f78c;\n  --swui-state-modified-color: var(--swui-primary-action-color);\n  --swui-state-modified-light-color: #e2edf7;\n  --swui-state-loading-color: #ced0d7;\n  --swui-state-loading-light-color: #fafafb;\n\n  /* Fonts */\n  --swui-font-primary: \"Open Sans\", system-ui;\n  --swui-font-weight-text: 400;\n  --swui-font-weight-link: 600;\n  --swui-font-buttons: var(--swui-font-primary);\n  --swui-font-input: var(--swui-font-primary);\n  --swui-font-size-inputs: 14px;\n  --swui-font-size-small: 10px;\n  --swui-font-weight-inputs: 400;\n\n  /* Animation speeds */\n  --swui-animation-time-fast: 0.1s;\n  --swui-animation-time-medium: 0.25s;\n  --swui-animation-time-slow: 0.5s;\n\n  /* Form fields */\n  --swui-field-text-color: #424551;\n  --swui-field-text-color-disabled: #989cab;\n  --swui-field-text-spacing: 6px;\n  --swui-field-letter-spacing: -0.34px;\n  --swui-field-text-line-height: 20px;\n  --swui-field-bg-enabled: var(--swui-white);\n  --swui-field-bg-disabled: #e8e4ea;\n  --swui-field-border-color: #bbc1e1;\n  --swui-field-border-color-hover: #275efe;\n  --swui-field-border-color-disabled: var(--swui-separator-color);\n  --swui-field-shadow-color: rgba(0, 0, 0, 0.15);\n  --swui-field-box-size-large: 32px;\n  --swui-field-box-size-medium: 24px;\n  --swui-field-box-size-small: 16px;\n  --swui-field-border-radius: 4px;\n  --swui-field-icon-color: var(--swui-text-primary-color);\n  --swui-field-icon-size: 13px;\n  --swui-field-indicator-active-color: var(--swui-white);\n  --swui-field-indicator-inactive-color: var(--swui-hidden);\n\n  /* Borders */\n  --swui-border-radius: 4px;\n\n  /* Shadows */\n  --swui-shadow-modal: rgba(0, 0, 0, 0.2) 0px 0px 10px 4px;\n  --swui-shadow-popover: rgba(0, 0, 0, 0.2) 0px 0px 6px 4px;\n  --swui-shadow-box: rgba(0, 0, 0, 0.15) 0 2px 4px 0;\n  --swui-field-focus-shadow: inset 0px 0px 3pt 0pt rgba(0, 0, 100, 0.3);\n\n  /* Metrics */\n  --swui-metrics-indent: 8px;\n  --swui-metrics-spacing: 8px;\n  --swui-metrics-space: 8px;\n}\n";
 styleInject(css$1);
@@ -263,3 +263,3 @@
 
-var css$7 = ".Link-module_link__2PdX5 {\n  --swui-link-color: var(--swui-primary-action-color);\n  --swui-link-color-hover: var(--swui-primary-action-color-hover);\n  --swui-link-color-active: var(--swui-primary-action-color-active);\n  --swui-link-color-focus: var(--swui-primary-action-color);\n  --swui-link-color-disabled: var(--swui-text-disabled-color);\n\n  /*\n   * Styling\n   */\n  color: var(--swui-link-color);\n}\n\n  .Link-module_link__2PdX5:not(.Link-module_disabled__1OQi7) {\n    cursor: pointer;\n  }\n\n  .Link-module_link__2PdX5:not(.Link-module_disabled__1OQi7):hover,\n    .Link-module_link__2PdX5:not(.Link-module_disabled__1OQi7):active,\n    .Link-module_link__2PdX5:not(.Link-module_disabled__1OQi7):focus {\n      text-decoration: underline;\n    }\n\n  .Link-module_link__2PdX5:hover {\n    color: var(--swui-link-color-hover);\n  }\n\n  .Link-module_link__2PdX5:active {\n    color: var(--swui-link-color-active);\n  }\n\n  .Link-module_link__2PdX5.Link-module_disabled__1OQi7 {\n    color: var(--swui-link-color-disabled);\n  }\n\n  .Link-module_link__2PdX5:focus {\n    outline: none;\n    color: var(--swui-link-color-focus);\n  }\n";
+var css$7 = ".Link-module_link__2PdX5 {\n  --swui-link-font-family: var(--swui-font-primary);\n  --swui-link-text-decoration: underline;\n  --swui-link-font-weight: var(--swui-font-weight-link);\n  --swui-link-color: var(--swui-primary-action-color);\n  --swui-link-color-hover: var(--swui-primary-action-color-hover);\n  --swui-link-color-active: var(--swui-primary-action-color-active);\n  --swui-link-color-focus: var(--swui-primary-action-color-focus);\n  --swui-link-color-disabled: var(--swui-text-disabled-color);\n  --swui-link-focus-highlight-color: var(--lhds-color-blue-300);\n  --swui-link-focus-highlight-color-disabled: var(--swui-link-color-disabled);\n\n  /*\n   * Private vars\n   */\n  --current-text-color: var(--swui-link-color);\n  --current-focus-highlight-color: transparent;\n\n  /*\n   * Styling\n   */\n  color: var(--current-text-color);\n  font-family: var(--swui-link-font-family);\n  font-weight: var(--swui-link-font-weight);\n  box-sizing: border-box;\n  border: 1px solid var(--current-focus-highlight-color);\n  -webkit-text-decoration: var(--swui-link-text-decoration);\n          text-decoration: var(--swui-link-text-decoration);\n}\n\n  .Link-module_link__2PdX5:not(.Link-module_disabled__1OQi7) {\n    cursor: pointer;\n  }\n\n  .Link-module_link__2PdX5:focus {\n    outline: none;\n  }\n\n  .Link-module_link__2PdX5:focus:not(:active) {\n      --current-focus-highlight-color: var(--swui-link-focus-highlight-color);\n      cursor: pointer;\n    }\n\n  .Link-module_link__2PdX5:focus.Link-module_disabled__1OQi7 {\n      --current-focus-highlight-color: var(\n        --swui-link-focus-highlight-color-disabled\n      );\n      cursor: default;\n    }\n\n  .Link-module_link__2PdX5:hover {\n    --current-text-color: var(--swui-link-color-hover);\n  }\n\n  .Link-module_link__2PdX5:active {\n    --current-text-color: var(--swui-link-color-active);\n  }\n\n  .Link-module_link__2PdX5.Link-module_disabled__1OQi7 {\n    --current-text-color: var(--swui-link-color-disabled);\n  }\n";
 var styles$5 = {"link":"Link-module_link__2PdX5","disabled":"Link-module_disabled__1OQi7"};
@@ -269,3 +269,3 @@ styleInject(css$7);
 var Link = function (_a) {
-    var children = _a.children, className = _a.className, onClick = _a.onClick, _b = _a.tabIndex, tabIndex = _b === void 0 ? 0 : _b, disabled = _a.disabled, spanProps = __rest(_a, ["children", "className", "onClick", "tabIndex", "disabled"]);
+    var children = _a.children, className = _a.className, onClick = _a.onClick, _b = _a.tabIndex, tabIndex = _b === void 0 ? 0 : _b, disableTabIndex = _a.disableTabIndex, disabled = _a.disabled, spanProps = __rest(_a, ["children", "className", "onClick", "tabIndex", "disableTabIndex", "disabled"]);
     var onKeyDown = function (ev) {
@@ -277,6 +277,6 @@ if ((ev.key === " " || ev.key === "Enter") && onClick) {
     };
-    return (React.createElement("span", __assign({ role: "link", tabIndex: tabIndex, className: cx(styles$5.link, disabled && styles$5.disabled, className), onClick: !disabled ? onClick : undefined, onKeyDown: onKeyDown }, spanProps), children));
+    return (React.createElement("span", __assign({ role: "link", tabIndex: !disableTabIndex ? tabIndex : undefined, className: cx(styles$5.link, disabled && styles$5.disabled, className), onClick: !disabled ? onClick : undefined, onKeyDown: !disabled ? onKeyDown : undefined }, spanProps), children));
 };
 
-var css$8 = ".Chip-module_chip__3Uf1d {\n  --swui-chip-line-height: 16px;\n  --swui-chip-font-size: 12px;\n  --swui-chip-letter-spacing: -0.2px;\n  --swui-chip-height: 24px;\n  --swui-chip-bg-color: var(--swui-primary-action-color);\n  --swui-chip-text-color-primary: var(--swui-white);\n  --swui-chip-text-color-secondary: var(--lhds-color-blue-800);\n  --swui-chip-border-radius: var(--swui-border-radius);\n  --swui-chip-shadow: var(--swui-border-radius);\n\n  /* Border */\n  --swui-chip-border-color-primary: var(--swui-primary-action-color);\n  --swui-chip-border-color-secondary: var(--lhds-color-blue-300);\n\n  --current-icon-color: var(--swui-chip-bg-color);\n  --current-bg-color: var(--lhds-color-blue-50);\n\n  /*\n   * Styling\n   */\n  box-sizing: border-box;\n  display: -webkit-inline-box;\n  display: inline-flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n          flex-direction: row;\n  -webkit-box-align: center;\n          align-items: center;\n  height: var(--swui-chip-height);\n\n  box-shadow: var(--swui-chip-shadow);\n  border-radius: var(--swui-chip-border-radius);\n  padding-left: var(--swui-metrics-space);\n  padding-right: calc(var(--swui-metrics-space) / 2);\n  background-color: var(--current-bg-color);\n}\n\n  .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i {\n    border: 1px solid var(--swui-chip-border-color-primary);\n    --current-bg-color: var(--swui-chip-bg-color);\n    --current-icon-color: var(--swui-white);\n  }\n\n  .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i .Chip-module_label__3gHgv {\n      --swui-link-color: var(--swui-chip-text-color-primary);\n      --swui-link-color-hover: var(--swui-chip-text-color-primary);\n      --swui-link-color-active: var(--swui-chip-text-color-primary);\n      --swui-link-color-focus: var(--swui-chip-text-color-primary);\n      --swui-link-color-disabled: var(--swui-chip-text-color-primary);\n    }\n\n  .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i .Chip-module_close__2uEi1 {\n      --swui-button-background-color-hover: var(\n        --swui-primary-action-color-hover\n      );\n      --swui-button-background-color-focus: var(\n        --swui-primary-action-color-focus\n      );\n      --swui-button-background-color-active: var(\n        --swui-primary-action-color-active\n      );\n    }\n\n  .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY {\n    border: 1px solid var(--swui-chip-border-color-secondary);\n    --current-bg-color: var(--lhds-color-blue-50);\n    --current-icon-color: var(--swui-chip-text-color-secondary);\n  }\n\n  .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY .Chip-module_label__3gHgv {\n      --swui-link-color: var(--swui-chip-text-color-secondary);\n      --swui-link-color-active: var(--swui-chip-text-color-secondary);\n      --swui-link-color-hover: var(--swui-chip-text-color-secondary);\n      --swui-link-color-focus: var(--swui-chip-text-color-secondary);\n      --swui-link-color-disabled: var(--swui-chip-text-color-secondary);\n    }\n\n  .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY .Chip-module_close__2uEi1 {\n      --swui-button-background-color-active: var(--lhds-color-blue-400);\n      --swui-button-background-color-focus: var(--lhds-color-blue-300);\n      --swui-button-background-color-hover: var(--lhds-color-blue-200);\n    }\n\n  .Chip-module_chip__3Uf1d.Chip-module_removable__1fyEM {\n    padding-right: calc(var(--swui-metrics-space) / 2);\n  }\n\n  /*\n   * Specifying the class twice gives the css rule more specificity which\n   * makes it possible to override properties without having to use !important\n   */\n\n  .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv.Chip-module_label__3gHgv {\n    font-size: var(--swui-chip-font-size);\n    letter-spacing: var(--swui-chip-letter-spacing);\n    line-height: var(--swui-chip-line-height);\n    padding-right: calc(var(--swui-metrics-space) / 2);\n  }\n\n  .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv.Chip-module_label__3gHgv.Chip-module_clickable__3zjMU {\n      cursor: pointer;\n    }\n\n  .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv.Chip-module_label__3gHgv.Chip-module_clickable__3zjMU:hover {\n        text-decoration: underline;\n      }\n\n  .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1.Chip-module_close__2uEi1 {\n    width: 16px;\n    height: 16px;\n  }\n\n  .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1.Chip-module_close__2uEi1 svg {\n      color: var(--current-icon-color);\n      margin-top: -1px;\n      width: 10px;\n      height: 10px;\n    }\n";
+var css$8 = ".Chip-module_chip__3Uf1d {\n  --swui-chip-line-height: 16px;\n  --swui-chip-font-size: 12px;\n  --swui-chip-letter-spacing: -0.2px;\n  --swui-chip-height: 24px;\n  --swui-chip-bg-color: var(--swui-primary-action-color);\n  --swui-chip-text-color-primary: var(--swui-white);\n  --swui-chip-text-color-secondary: var(--lhds-color-blue-800);\n  --swui-chip-border-radius: var(--swui-border-radius);\n  --swui-chip-shadow: var(--swui-border-radius);\n\n  /* Border */\n  --swui-chip-border-color-primary: var(--swui-primary-action-color);\n  --swui-chip-border-color-secondary: var(--lhds-color-blue-300);\n\n  --current-icon-color: var(--swui-chip-bg-color);\n  --current-bg-color: var(--lhds-color-blue-50);\n\n  /*\n   * Styling\n   */\n  box-sizing: border-box;\n  display: -webkit-inline-box;\n  display: inline-flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n          flex-direction: row;\n  -webkit-box-align: center;\n          align-items: center;\n  height: var(--swui-chip-height);\n\n  box-shadow: var(--swui-chip-shadow);\n  border-radius: var(--swui-chip-border-radius);\n  padding-left: var(--swui-metrics-space);\n  padding-right: calc(var(--swui-metrics-space) / 2);\n  background-color: var(--current-bg-color);\n}\n\n  .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i {\n    border: 1px solid var(--swui-chip-border-color-primary);\n    --current-bg-color: var(--swui-chip-bg-color);\n    --current-icon-color: var(--swui-white);\n  }\n\n  .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i .Chip-module_label__3gHgv {\n      --swui-link-color: var(--swui-chip-text-color-primary);\n      --swui-link-color-hover: var(--swui-chip-text-color-primary);\n      --swui-link-color-active: var(--swui-chip-text-color-primary);\n      --swui-link-color-focus: var(--swui-chip-text-color-primary);\n      --swui-link-color-disabled: var(--swui-chip-text-color-primary);\n      --swui-link-focus-highlight-color: var(--swui-chip-text-color-primary);\n    }\n\n  .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i .Chip-module_close__2uEi1 {\n      --swui-button-background-color-hover: var(\n        --swui-primary-action-color-hover\n      );\n      --swui-button-background-color-focus: var(\n        --swui-primary-action-color-focus\n      );\n      --swui-button-background-color-active: var(\n        --swui-primary-action-color-active\n      );\n    }\n\n  .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i .Chip-module_close__2uEi1:focus {\n        --swui-button-box-shadow-focus: 0 0 3px 1px var(--swui-white);\n      }\n\n  .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY {\n    border: 1px solid var(--swui-chip-border-color-secondary);\n    --current-bg-color: var(--lhds-color-blue-50);\n    --current-icon-color: var(--swui-chip-text-color-secondary);\n  }\n\n  .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY .Chip-module_label__3gHgv {\n      --swui-link-color: var(--swui-chip-text-color-secondary);\n      --swui-link-color-active: var(--swui-chip-text-color-secondary);\n      --swui-link-color-hover: var(--swui-chip-text-color-secondary);\n      --swui-link-color-focus: var(--swui-chip-text-color-secondary);\n      --swui-link-color-disabled: var(--swui-chip-text-color-secondary);\n      --swui-link-focus-highlight-color: var(--swui-chip-text-color-secondary);\n    }\n\n  .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY .Chip-module_close__2uEi1 {\n      --swui-button-background-color-active: var(--lhds-color-blue-400);\n      --swui-button-background-color-focus: var(--lhds-color-blue-300);\n      --swui-button-background-color-hover: var(--lhds-color-blue-200);\n    }\n\n  .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY .Chip-module_close__2uEi1:focus {\n        --swui-button-box-shadow-focus: 0 0 3px 1px\n          var(--swui-chip-text-color-secondary);\n      }\n\n  .Chip-module_chip__3Uf1d.Chip-module_removable__1fyEM {\n    padding-right: calc(var(--swui-metrics-space) / 2);\n  }\n\n  /*\n   * Specifying the class twice gives the css rule more specificity which\n   * makes it possible to override properties without having to use !important\n   */\n\n  .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv.Chip-module_label__3gHgv {\n    font-size: var(--swui-chip-font-size);\n    letter-spacing: var(--swui-chip-letter-spacing);\n    line-height: var(--swui-chip-line-height);\n    padding-right: calc(var(--swui-metrics-space) / 2);\n    --swui-link-text-decoration: none;\n    --swui-link-focus-highlight-color-disabled: transparent;\n  }\n\n  .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv.Chip-module_label__3gHgv.Chip-module_clickable__3zjMU {\n      cursor: pointer;\n    }\n\n  .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv.Chip-module_label__3gHgv.Chip-module_clickable__3zjMU:hover,\n      .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv.Chip-module_label__3gHgv.Chip-module_clickable__3zjMU:focus {\n        text-decoration: underline;\n      }\n\n  .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1.Chip-module_close__2uEi1 {\n    width: 16px;\n    height: 16px;\n  }\n\n  .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1.Chip-module_close__2uEi1 svg {\n      color: var(--current-icon-color);\n      margin-top: -1px;\n      width: 10px;\n      height: 10px;\n    }\n";
 var styles$6 = {"chip":"Chip-module_chip__3Uf1d","primary":"Chip-module_primary__3kb_i","label":"Chip-module_label__3gHgv","close":"Chip-module_close__2uEi1","secondary":"Chip-module_secondary__2hWgY","removable":"Chip-module_removable__1fyEM","clickable":"Chip-module_clickable__3zjMU"};
@@ -295,3 +295,3 @@ styleInject(css$8);
     return (React.createElement("div", { className: cx(styles$6.chip, styles$6[variant], onClickRemove ? styles$6.removable : undefined) },
-        React.createElement(Link, { disabled: !onClick, onClick: onClickHandler, className: cx(styles$6.label, onClick ? styles$6.clickable : undefined) }, label),
+        React.createElement(Link, { disabled: !onClick, onClick: onClickHandler, disableTabIndex: !onClick, className: cx(styles$6.label, onClick ? styles$6.clickable : undefined) }, label),
         onClickRemove && (React.createElement(FlatButton, { leftIcon: faTimes.faTimes, size: "small", className: styles$6.close, onClick: onClickRemove }))));
@@ -298,0 +298,0 @@ };

package.json

 {
   "name": "@stenajs-webui/elements",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.1",
   "description": "",
@@ -65,3 +65,3 @@ "author": "mattias800",
   ],
-  "gitHead": "d1f2154ae6e43befb624dc64bf313f390ee6da22"
+  "gitHead": "89bdddeb2322fdd2cd7348fcd0d3528ed3c201af"
 }

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

231497

1.81%

Lines of code

1485

1.16%

No dependency changes