@jorilindell/hds-core 4.10.1

package/lib/components/table/table.css

@@ -0,0 +1,114 @@
+.hds-table {
+  --content-background-color: var(--color-white);
+  border-collapse: collapse;
+  line-height: 1.5;
+  width: 100%;
+}
+.hds-table-container {
+  overflow-x: auto;
+}
+.hds-table-container:focus {
+  outline: var(--color-focus-outline) 3px solid;
+}
+.hds-table th {
+  border-bottom: 1px solid var(--color-black-20);
+  font-size: var(--fontsize-body-m);
+  font-weight: 500;
+  line-height: var(--lineheight-l);
+  padding: var(--spacing-xs) var(--spacing-m);
+  text-align: left;
+  white-space: nowrap;
+}
+.hds-table__content tr td {
+  background-color: var(--content-background-color);
+  border-bottom: 1px solid var(--color-black-50);
+  color: var(--color-black-90);
+  font-size: var(--fontsize-body-m);
+  font-weight: 400;
+  line-height: 24px;
+  padding: var(--spacing-xs) var(--spacing-m);
+}
+.hds-table__header-row {
+  background-color: var(--header-background-color);
+}
+.hds-table__content--text-align-td-right td {
+  text-align: right;
+}
+.hds-table__caption {
+  font-size: var(--fontsize-body-l);
+  font-weight: normal;
+  line-height: var(--lineheight-l);
+  margin-bottom: var(--spacing-s);
+  text-align: left;
+}
+.hds-table--dark {
+  --header-background-color: var(--color-bus);
+}
+.hds-table.hds-table--dark th {
+  color: var(--color-white);
+}
+.hds-table--light {
+  --header-background-color: var(--color-silver);
+}
+.hds-table.hds-table--light th {
+  color: var(--color-black-90);
+}
+.hds-table--with-vertical-lines .hds-table__content {
+  border-left: 1px solid var(--color-black-50);
+}
+.hds-table--with-vertical-lines .hds-table__content td {
+  border-right: 1px solid var(--color-black-50);
+}
+.hds-table--with-vertical-lines .hds-table__header-row {
+  border-left: 1px solid var(--header-background-color);
+  border-right: 1px solid var(--header-background-color);
+}
+.hds-table--dense.hds-table th {
+  font-size: var(--fontsize-body-s);
+  font-weight: bold;
+  padding: 9px var(--spacing-s);
+}
+.hds-table--dense .hds-table__content tr td {
+  font-size: var(--fontsize-body-s);
+  padding: 9px var(--spacing-s);
+}
+.hds-table--dense .hds-table__caption {
+  font-size: var(--fontsize-body-m);
+  line-height: var(--lineheight-l);
+  margin-bottom: var(--spacing-xs);
+}
+.hds-table--zebra .hds-table__content tr td {
+  border-bottom: none;
+}
+.hds-table--zebra .hds-table__content tr:nth-child(even) td {
+  background-color: var(--color-black-10);
+}
+.hds-table__vertical-header-column {
+  background-color: var(--header-background-color);
+}
+.hds-table--with-vertical-header.hds-table--with-vertical-lines .hds-table__content {
+  border-left: none;
+}
+.hds-table--with-vertical-lines.hds-table--with-vertical-header .hds-table__header-row {
+  border-left: none;
+}
+.hds-table--text-align-right {
+  text-align: right;
+}
+@media (max-width: 767px) {
+  .hds-table th {
+    font-size: var(--fontsize-body-s);
+    font-weight: bold;
+    padding: 9px var(--spacing-s);
+  }
+  .hds-table__content tr td {
+    font-size: var(--fontsize-body-s);
+    padding: 9px var(--spacing-s);
+  }
+  .hds-table__caption {
+    font-size: var(--fontsize-heading-xxs);
+    letter-spacing: 0.2px;
+    line-height: var(--lineheight-l);
+    margin-bottom: var(--spacing-xs);
+  }
+}

package/lib/components/table/table.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/_bem.scss","../../../src/components/table/table.scss","../../../src/components/table/_table-mixin.scss"],"names":[],"mappings":"AAoFM;ECnFN,8CCEE;EAEA,yBAAA;EACA,gBAAA;EACA,WAAA;ADFF;ACIE;EACE,gBAAA;ADFJ;ACKE;EACE,6CAAA;ADHJ;ACME;EACE,8CAAA;EACA,iCAAA;EACA,gBAAA;EACA,gCAAA;EACA,2CAAA;EACA,gBAAA;EACA,mBAAA;ADJJ;ACOE;EACE,iDAAA;EACA,8CAAA;EACA,4BAAA;EACA,iCAAA;EACA,gBAAA;EACA,iBAAA;EACA,2CAAA;ADLJ;ACQE;EACE,gDAAA;ADNJ;ACiCE;EACE,iBAAA;AD9BJ;ADwIM;EErGJ,iCAAA;EACA,mBAAA;EACA,gCAAA;EACA,+BAAA;EACA,gBAAA;AD/BF;ACoCE;EACE,2CAAA;ADjCJ;ACoCE;EACE,yBAAA;ADlCJ;ACuCE;EACE,8CAAA;ADpCJ;ACuCE;EACE,4BAAA;ADrCJ;ACuEE;EACE,4CAAA;ADpEJ;ACsEI;EACE,6CAAA;ADpEN;ACwEE;EACE,qDAAA;EACA,sDAAA;ADtEJ;AC+BE;EACE,iCAAA;EACA,iBAAA;EACA,6BAAA;AD5BJ;AC8BE;EACE,iCAAA;EACA,6BAAA;AD5BJ;AC8BE;EACE,iCAAA;EACA,gCAAA;EACA,gCAAA;AD5BJ;ACkCI;EACE,mBAAA;AD/BN;ACkCI;EACE,uCAAA;ADhCN;ACqDE;EACE,gDAAA;ADlDJ;ACqDE;EACE,iBAAA;ADnDJ;ACsDE;EACE,iBAAA;ADpDJ;AD0DM;EEDJ,iBAAA;ADrDF;AC9DE;EACE;IACE,iCAAA;IACA,iBAAA;IACA,6BAAA;EDiEJ;EC9DE;IACE,iCAAA;IACA,6BAAA;EDgEJ;EC7DE;IACE,sCAAA;IACA,qBAAA;IACA,gCAAA;IACA,gCAAA;ED+DJ;AACF","file":"table.css","sourcesContent":["@use \"sass:string\";\n\n$blockPrefix: 'hds-';\n$modifierDelimeter: '--';\n$elementDelimeter: '__';\n\n// Copied from https://github.com/Shudrum/sass-easy-bem\n// The module was added to root/node_modules, so SASS cannot find it from core.\n\n// Copyright (c) 2018-2019 Julien Martin.\n// This source code is licensed under the MIT license found in the\n// LICENSE file in the root directory of this source tree.\n\n// Utility functions\n\n@function get-parent-selector($selector) {\n  $parent: null;\n\n  @while string.index('#{$selector}', ' ') {\n    $first-element: string.slice('#{$selector}', 0, string.index('#{$selector}', ' ') - 1);\n\n    @if $parent {\n      $parent: '#{$parent} #{$first-element}';\n    } @else {\n      $parent: $first-element;\n    }\n\n    $selector: string.slice('#{$selector}', string.index('#{$selector}', ' ') + 1);\n  }\n\n  @return $parent;\n}\n\n@function get-last-selector($selector) {\n  @while string.index('#{$selector}', ' ') {\n    $selector: string.slice('#{$selector}', string.index('#{$selector}', ' ') + 1);\n  }\n\n  @return $selector;\n}\n\n@function get-block($selector) {\n  $have-element: string.index('#{&}', $elementDelimeter);\n  $have-modifier: string.index('#{&}', $modifierDelimeter);\n\n  @if $have-element {\n    @return string.slice('#{$selector}', 0, string.index('#{&}', $elementDelimeter) - 1);\n  }\n\n  @if $have-modifier {\n    @return string.slice('#{$selector}', 0, string.index('#{&}', $modifierDelimeter) - 1);\n  }\n\n  @return $selector;\n}\n\n@function get-element($selector) {\n  $have-modifier: string.index('#{$selector}', $modifierDelimeter);\n\n  @if $have-modifier {\n    $selector: string.slice('#{$selector}', 0, string.index('#{$selector}', $modifierDelimeter) - 1);\n\n    @while string.index(string.slice('#{$selector}', 2), '.') {\n      $selector: string.slice('#{$selector}', string.index(string.slice('#{$selector}', 2), '.') + 1);\n    }\n  }\n\n  @return $selector;\n}\n\n// prefix added by HDS\n// use for creating classes like .hds-<$block>\n// set $noPrefix to false to create classes like .-<$block>\n@mixin block($block, $noPrefix: false, $react: false) {\n  $className: $block;\n\n  @if not($noPrefix) {\n    $className: #{$blockPrefix + $block};\n  }\n\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$className} {\n        @content;\n      }\n    }\n  }\n}\n\n// use inside block() or another element() to create scoped classes like .hds-<block>.hds-<block>__<$element>\n@mixin element($element) {\n  $is-modifier: string.index('#{&}', $modifierDelimeter);\n  // stylelint-disable-next-line scss/function-no-unknown\n  $block: get-block(&);\n\n  @if not $is-modifier {\n    @at-root {\n      #{$block}__#{$element} {\n        @content;\n      }\n    }\n  }\n\n  @if $is-modifier {\n    $is-element: string.index('#{&}', $elementDelimeter);\n\n    @if $is-element {\n      $block: string.slice('#{&}', 0, string.index('#{&}', $elementDelimeter) - 1);\n\n      @at-root {\n        & #{$block}__#{$element} {\n          @content;\n        }\n      }\n    }\n\n    @if not $is-element {\n      $block: string.slice('#{&}', 0, string.index('#{&}', $modifierDelimeter) - 1);\n      $block: string.slice($block, 1, string.index(string.slice($block, 2, -1), '.'));\n\n      @at-root {\n        & #{$block}__#{$element} {\n          @content;\n        }\n      }\n    }\n  }\n}\n\n// use inside block() or element() to create scoped classes like .hds-<block>.hds-<block>--<$modifier>\n@mixin modifier($modifier) {\n  $parent-selector: get-parent-selector('#{&}');\n  $last-selector: get-last-selector('#{&}');\n  // stylelint-disable-next-line scss/function-no-unknown\n  $element: get-element($last-selector);\n\n  @at-root {\n    @if $parent-selector {\n      #{$parent-selector} #{$last-selector}#{$element}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    } @else {\n      #{$last-selector}#{$element}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n// end of sass-easy-bem\n\n// HDS add-on to create .hds-<block>--modifier instead of .hds-<block>.hds-<block>--modifier\n@mixin unscopedModifier($block, $modifier, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n// HDS add-on to create .hds-<block>__element instead of .hds-<block>.hds-<block>__element\n@mixin unscopedElement($block, $element, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$elementDelimeter}#{$element} {\n        @content;\n      }\n    }\n  }\n}\n\n// HDS add-on to create .hds-<block>--modifier.hds-<block>--theme {\n@mixin unscopedModifierWithTheme($block, $modifier, $theme, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier}.#{$blockPrefix + $block}#{$modifierDelimeter}#{$theme} {\n        @content;\n      }\n    }\n  }\n}","@use './table-mixin' as *;\n@include table;\n","@use '../../utils/bem' as BemUtil;\n\n@mixin base {\n  --content-background-color: var(--color-white);\n\n  border-collapse: collapse;\n  line-height: 1.5;\n  width: 100%;\n\n  &-container {\n    overflow-x: auto;\n  }\n\n  &-container:focus {\n    outline: var(--color-focus-outline) 3px solid;\n  }\n\n  & th {\n    border-bottom: 1px solid var(--color-black-20);\n    font-size: var(--fontsize-body-m);\n    font-weight: 500;\n    line-height: var(--lineheight-l);\n    padding: var(--spacing-xs) var(--spacing-m);\n    text-align: left;\n    white-space: nowrap;\n  }\n\n  &__content tr td {\n    background-color: var(--content-background-color);\n    border-bottom: 1px solid var(--color-black-50);\n    color: var(--color-black-90);\n    font-size: var(--fontsize-body-m);\n    font-weight: 400;\n    line-height: 24px;\n    padding: var(--spacing-xs) var(--spacing-m);\n  }\n\n  &__header-row {\n    background-color: var(--header-background-color);\n  }\n}\n\n@mixin mobile {\n  @media (max-width: 767px) {\n    & th {\n      font-size: var(--fontsize-body-s);\n      font-weight: bold;\n      padding: 9px var(--spacing-s);\n    }\n\n    &__content tr td {\n      font-size: var(--fontsize-body-s);\n      padding: 9px var(--spacing-s);\n    }\n\n    &__caption {\n      font-size: var(--fontsize-heading-xxs);\n      letter-spacing: 0.2px;\n      line-height: var(--lineheight-l);\n      margin-bottom: var(--spacing-xs);\n    }\n  }\n}\n\n@mixin textAlignTdRight {\n  &--text-align-td-right td {\n    text-align: right;\n  }\n}\n\n@mixin caption {\n  font-size: var(--fontsize-body-l);\n  font-weight: normal;\n  line-height: var(--lineheight-l);\n  margin-bottom: var(--spacing-s);\n  text-align: left;\n}\n\n\n@mixin dark {\n  &--dark {\n    --header-background-color: var(--color-bus);\n  }\n\n  &#{&}--dark th {\n    color: var(--color-white);\n  }\n}\n\n@mixin light {\n  &--light {\n    --header-background-color: var(--color-silver);\n  }\n\n  &#{&}--light th {\n    color: var(--color-black-90);\n  }\n}\n\n@mixin dense {\n  &--dense#{&} th {\n    font-size: var(--fontsize-body-s);\n    font-weight: bold;\n    padding: 9px var(--spacing-s);\n  }\n  &--dense #{&}__content tr td {\n    font-size: var(--fontsize-body-s);\n    padding: 9px var(--spacing-s);\n  }\n  &--dense #{&}__caption {\n    font-size: var(--fontsize-body-m);\n    line-height: var(--lineheight-l);\n    margin-bottom: var(--spacing-xs);\n  }\n}\n\n@mixin zebra {\n  &--zebra #{&}__content {\n    & tr td {\n      border-bottom: none;\n    }\n\n    & tr:nth-child(even) td {\n      background-color: var(--color-black-10);\n    }\n  }\n}\n\n@mixin withVerticalLines {\n  &--with-vertical-lines #{&}__content {\n    border-left: 1px solid var(--color-black-50);\n\n    & td {\n      border-right: 1px solid var(--color-black-50);\n    }\n  }\n\n  &--with-vertical-lines #{&}__header-row {\n    border-left: 1px solid var(--header-background-color);\n    border-right: 1px solid var(--header-background-color);\n  }\n}\n\n@mixin withVerticalHeader {\n  &__vertical-header-column {\n    background-color: var(--header-background-color);\n  }\n\n  &--with-vertical-header#{&}--with-vertical-lines #{&}__content {\n    border-left: none;\n  }\n\n  &--with-vertical-lines#{&}--with-vertical-header #{&}__header-row {\n    border-left: none;\n  }\n}\n\n@mixin textAlignRight {\n  text-align: right;\n}\n\n@mixin table(\n  $all: true,\n  $base: false,\n  $textAlignTdRight: false,\n  $caption: false,\n  $dark: false,\n  $light: false,\n  $withVerticalLines: false,\n  $dense: false,\n  $zebra: false,\n  $withVerticalHeader: false,\n  $textAlignRight: false,\n  $override: null,\n  $react: false\n) {\n  $className: 'table';\n\n  @if $override {\n    $className: $override;\n  }\n\n  @if $all or $base {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include base;\n    }\n  }\n\n  @if $all or $textAlignTdRight {\n    @include BemUtil.unscopedElement($className, 'content', $react) {\n      @include textAlignTdRight;\n    }\n  }\n\n  @if $all or $caption {\n    @include BemUtil.unscopedElement($className, 'caption', $react) {\n      @include caption;\n    }\n  }\n\n\n  @if $all or $dark {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include dark;\n    }\n  }\n\n  @if $all or $light {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include light;\n    }\n  }\n\n  @if $all or $withVerticalLines {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include withVerticalLines;\n    }\n  }\n\n  @if $all or $dense {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include dense;\n    }\n  }\n\n  @if $all or $zebra {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include zebra;\n    }\n  }\n\n  @if $all or $withVerticalHeader {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include withVerticalHeader;\n    }\n  }\n\n  @if $all or $textAlignRight {\n    @include BemUtil.unscopedModifier($className, 'text-align-right', $react) {\n      @include textAlignRight;\n    }\n  }\n\n  @if $all or $base {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include mobile;\n    }\n  }\n\n}\n"]}

package/lib/components/table/table.min.css

@@ -0,0 +1 @@
+.hds-table{--content-background-color:var(--color-white);border-collapse:collapse;line-height:1.5;width:100%}.hds-table-container{overflow-x:auto}.hds-table-container:focus{outline:var(--color-focus-outline) 3px solid}.hds-table th{border-bottom:1px solid var(--color-black-20);font-weight:500;line-height:var(--lineheight-l);text-align:left;white-space:nowrap}.hds-table__content tr td,.hds-table th{font-size:var(--fontsize-body-m);padding:var(--spacing-xs) var(--spacing-m)}.hds-table__content tr td{background-color:var(--content-background-color);border-bottom:1px solid var(--color-black-50);color:var(--color-black-90);font-weight:400;line-height:24px}.hds-table__header-row{background-color:var(--header-background-color)}.hds-table__content--text-align-td-right td{text-align:right}.hds-table__caption{font-size:var(--fontsize-body-l);font-weight:400;line-height:var(--lineheight-l);margin-bottom:var(--spacing-s);text-align:left}.hds-table--dark{--header-background-color:var(--color-bus)}.hds-table.hds-table--dark th{color:var(--color-white)}.hds-table--light{--header-background-color:var(--color-silver)}.hds-table.hds-table--light th{color:var(--color-black-90)}.hds-table--with-vertical-lines .hds-table__content{border-left:1px solid var(--color-black-50)}.hds-table--with-vertical-lines .hds-table__content td{border-right:1px solid var(--color-black-50)}.hds-table--with-vertical-lines .hds-table__header-row{border-left:1px solid var(--header-background-color);border-right:1px solid var(--header-background-color)}.hds-table--dense.hds-table th{font-weight:700}.hds-table--dense .hds-table__content tr td,.hds-table--dense.hds-table th{font-size:var(--fontsize-body-s);padding:9px var(--spacing-s)}.hds-table--dense .hds-table__caption{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-bottom:var(--spacing-xs)}.hds-table--zebra .hds-table__content tr td{border-bottom:none}.hds-table--zebra .hds-table__content tr:nth-child(2n) td{background-color:var(--color-black-10)}.hds-table__vertical-header-column{background-color:var(--header-background-color)}.hds-table--with-vertical-header.hds-table--with-vertical-lines .hds-table__content,.hds-table--with-vertical-lines.hds-table--with-vertical-header .hds-table__header-row{border-left:none}.hds-table--text-align-right{text-align:right}@media (max-width:767px){.hds-table th{font-weight:700}.hds-table__content tr td,.hds-table th{font-size:var(--fontsize-body-s);padding:9px var(--spacing-s)}.hds-table__caption{font-size:var(--fontsize-heading-xxs);letter-spacing:.2px;line-height:var(--lineheight-l);margin-bottom:var(--spacing-xs)}}

package/lib/components/table/table.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/_bem.scss","../../../src/components/table/table.scss","../../../src/components/table/_table-mixin.scss"],"names":[],"mappings":"AAoFM,WCnFN,6CCEE,CAEA,wBAAA,CACA,eAAA,CACA,UDFF,CCIE,qBACE,eDFJ,CCKE,2BACE,4CDHJ,CCME,cACE,6CAAA,CAEA,eAAA,CACA,+BAAA,CAEA,eAAA,CACA,kBDJJ,CCOE,wCARE,gCAAA,CAGA,0CDOJ,CCFE,0BACE,gDAAA,CACA,6CAAA,CACA,2BAAA,CAEA,eAAA,CACA,gBDJJ,CCQE,uBACE,+CDNJ,CCiCE,4CACE,gBD9BJ,CDwIM,oBErGJ,gCAAA,CACA,eAAA,CACA,+BAAA,CACA,8BAAA,CACA,eD/BF,CCoCE,iBACE,0CDjCJ,CCoCE,8BACE,wBDlCJ,CCuCE,kBACE,6CDpCJ,CCuCE,+BACE,2BDrCJ,CCuEE,oDACE,2CDpEJ,CCsEI,uDACE,4CDpEN,CCwEE,uDACE,oDAAA,CACA,qDDtEJ,CC+BE,+BAEE,eD3BJ,CC8BE,2EAJE,gCAAA,CAEA,4BDxBJ,CC8BE,sCACE,gCAAA,CACA,+BAAA,CACA,+BD5BJ,CCkCI,4CACE,kBD/BN,CCkCI,0DACE,sCDhCN,CCqDE,mCACE,+CDlDJ,CCyDE,2KACE,gBDpDJ,CD0DM,6BEDJ,gBDrDF,CC9DE,yBACE,cAEE,eDkEJ,CC9DE,wCALE,gCAAA,CAEA,4BDqEJ,CC7DE,oBACE,qCAAA,CACA,mBAAA,CACA,+BAAA,CACA,+BD+DJ,CACF","file":"table.min.css","sourcesContent":["@use \"sass:string\";\n\n$blockPrefix: 'hds-';\n$modifierDelimeter: '--';\n$elementDelimeter: '__';\n\n// Copied from https://github.com/Shudrum/sass-easy-bem\n// The module was added to root/node_modules, so SASS cannot find it from core.\n\n// Copyright (c) 2018-2019 Julien Martin.\n// This source code is licensed under the MIT license found in the\n// LICENSE file in the root directory of this source tree.\n\n// Utility functions\n\n@function get-parent-selector($selector) {\n  $parent: null;\n\n  @while string.index('#{$selector}', ' ') {\n    $first-element: string.slice('#{$selector}', 0, string.index('#{$selector}', ' ') - 1);\n\n    @if $parent {\n      $parent: '#{$parent} #{$first-element}';\n    } @else {\n      $parent: $first-element;\n    }\n\n    $selector: string.slice('#{$selector}', string.index('#{$selector}', ' ') + 1);\n  }\n\n  @return $parent;\n}\n\n@function get-last-selector($selector) {\n  @while string.index('#{$selector}', ' ') {\n    $selector: string.slice('#{$selector}', string.index('#{$selector}', ' ') + 1);\n  }\n\n  @return $selector;\n}\n\n@function get-block($selector) {\n  $have-element: string.index('#{&}', $elementDelimeter);\n  $have-modifier: string.index('#{&}', $modifierDelimeter);\n\n  @if $have-element {\n    @return string.slice('#{$selector}', 0, string.index('#{&}', $elementDelimeter) - 1);\n  }\n\n  @if $have-modifier {\n    @return string.slice('#{$selector}', 0, string.index('#{&}', $modifierDelimeter) - 1);\n  }\n\n  @return $selector;\n}\n\n@function get-element($selector) {\n  $have-modifier: string.index('#{$selector}', $modifierDelimeter);\n\n  @if $have-modifier {\n    $selector: string.slice('#{$selector}', 0, string.index('#{$selector}', $modifierDelimeter) - 1);\n\n    @while string.index(string.slice('#{$selector}', 2), '.') {\n      $selector: string.slice('#{$selector}', string.index(string.slice('#{$selector}', 2), '.') + 1);\n    }\n  }\n\n  @return $selector;\n}\n\n// prefix added by HDS\n// use for creating classes like .hds-<$block>\n// set $noPrefix to false to create classes like .-<$block>\n@mixin block($block, $noPrefix: false, $react: false) {\n  $className: $block;\n\n  @if not($noPrefix) {\n    $className: #{$blockPrefix + $block};\n  }\n\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$className} {\n        @content;\n      }\n    }\n  }\n}\n\n// use inside block() or another element() to create scoped classes like .hds-<block>.hds-<block>__<$element>\n@mixin element($element) {\n  $is-modifier: string.index('#{&}', $modifierDelimeter);\n  // stylelint-disable-next-line scss/function-no-unknown\n  $block: get-block(&);\n\n  @if not $is-modifier {\n    @at-root {\n      #{$block}__#{$element} {\n        @content;\n      }\n    }\n  }\n\n  @if $is-modifier {\n    $is-element: string.index('#{&}', $elementDelimeter);\n\n    @if $is-element {\n      $block: string.slice('#{&}', 0, string.index('#{&}', $elementDelimeter) - 1);\n\n      @at-root {\n        & #{$block}__#{$element} {\n          @content;\n        }\n      }\n    }\n\n    @if not $is-element {\n      $block: string.slice('#{&}', 0, string.index('#{&}', $modifierDelimeter) - 1);\n      $block: string.slice($block, 1, string.index(string.slice($block, 2, -1), '.'));\n\n      @at-root {\n        & #{$block}__#{$element} {\n          @content;\n        }\n      }\n    }\n  }\n}\n\n// use inside block() or element() to create scoped classes like .hds-<block>.hds-<block>--<$modifier>\n@mixin modifier($modifier) {\n  $parent-selector: get-parent-selector('#{&}');\n  $last-selector: get-last-selector('#{&}');\n  // stylelint-disable-next-line scss/function-no-unknown\n  $element: get-element($last-selector);\n\n  @at-root {\n    @if $parent-selector {\n      #{$parent-selector} #{$last-selector}#{$element}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    } @else {\n      #{$last-selector}#{$element}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n// end of sass-easy-bem\n\n// HDS add-on to create .hds-<block>--modifier instead of .hds-<block>.hds-<block>--modifier\n@mixin unscopedModifier($block, $modifier, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n// HDS add-on to create .hds-<block>__element instead of .hds-<block>.hds-<block>__element\n@mixin unscopedElement($block, $element, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$elementDelimeter}#{$element} {\n        @content;\n      }\n    }\n  }\n}\n\n// HDS add-on to create .hds-<block>--modifier.hds-<block>--theme {\n@mixin unscopedModifierWithTheme($block, $modifier, $theme, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier}.#{$blockPrefix + $block}#{$modifierDelimeter}#{$theme} {\n        @content;\n      }\n    }\n  }\n}","@use './table-mixin' as *;\n@include table;\n","@use '../../utils/bem' as BemUtil;\n\n@mixin base {\n  --content-background-color: var(--color-white);\n\n  border-collapse: collapse;\n  line-height: 1.5;\n  width: 100%;\n\n  &-container {\n    overflow-x: auto;\n  }\n\n  &-container:focus {\n    outline: var(--color-focus-outline) 3px solid;\n  }\n\n  & th {\n    border-bottom: 1px solid var(--color-black-20);\n    font-size: var(--fontsize-body-m);\n    font-weight: 500;\n    line-height: var(--lineheight-l);\n    padding: var(--spacing-xs) var(--spacing-m);\n    text-align: left;\n    white-space: nowrap;\n  }\n\n  &__content tr td {\n    background-color: var(--content-background-color);\n    border-bottom: 1px solid var(--color-black-50);\n    color: var(--color-black-90);\n    font-size: var(--fontsize-body-m);\n    font-weight: 400;\n    line-height: 24px;\n    padding: var(--spacing-xs) var(--spacing-m);\n  }\n\n  &__header-row {\n    background-color: var(--header-background-color);\n  }\n}\n\n@mixin mobile {\n  @media (max-width: 767px) {\n    & th {\n      font-size: var(--fontsize-body-s);\n      font-weight: bold;\n      padding: 9px var(--spacing-s);\n    }\n\n    &__content tr td {\n      font-size: var(--fontsize-body-s);\n      padding: 9px var(--spacing-s);\n    }\n\n    &__caption {\n      font-size: var(--fontsize-heading-xxs);\n      letter-spacing: 0.2px;\n      line-height: var(--lineheight-l);\n      margin-bottom: var(--spacing-xs);\n    }\n  }\n}\n\n@mixin textAlignTdRight {\n  &--text-align-td-right td {\n    text-align: right;\n  }\n}\n\n@mixin caption {\n  font-size: var(--fontsize-body-l);\n  font-weight: normal;\n  line-height: var(--lineheight-l);\n  margin-bottom: var(--spacing-s);\n  text-align: left;\n}\n\n\n@mixin dark {\n  &--dark {\n    --header-background-color: var(--color-bus);\n  }\n\n  &#{&}--dark th {\n    color: var(--color-white);\n  }\n}\n\n@mixin light {\n  &--light {\n    --header-background-color: var(--color-silver);\n  }\n\n  &#{&}--light th {\n    color: var(--color-black-90);\n  }\n}\n\n@mixin dense {\n  &--dense#{&} th {\n    font-size: var(--fontsize-body-s);\n    font-weight: bold;\n    padding: 9px var(--spacing-s);\n  }\n  &--dense #{&}__content tr td {\n    font-size: var(--fontsize-body-s);\n    padding: 9px var(--spacing-s);\n  }\n  &--dense #{&}__caption {\n    font-size: var(--fontsize-body-m);\n    line-height: var(--lineheight-l);\n    margin-bottom: var(--spacing-xs);\n  }\n}\n\n@mixin zebra {\n  &--zebra #{&}__content {\n    & tr td {\n      border-bottom: none;\n    }\n\n    & tr:nth-child(even) td {\n      background-color: var(--color-black-10);\n    }\n  }\n}\n\n@mixin withVerticalLines {\n  &--with-vertical-lines #{&}__content {\n    border-left: 1px solid var(--color-black-50);\n\n    & td {\n      border-right: 1px solid var(--color-black-50);\n    }\n  }\n\n  &--with-vertical-lines #{&}__header-row {\n    border-left: 1px solid var(--header-background-color);\n    border-right: 1px solid var(--header-background-color);\n  }\n}\n\n@mixin withVerticalHeader {\n  &__vertical-header-column {\n    background-color: var(--header-background-color);\n  }\n\n  &--with-vertical-header#{&}--with-vertical-lines #{&}__content {\n    border-left: none;\n  }\n\n  &--with-vertical-lines#{&}--with-vertical-header #{&}__header-row {\n    border-left: none;\n  }\n}\n\n@mixin textAlignRight {\n  text-align: right;\n}\n\n@mixin table(\n  $all: true,\n  $base: false,\n  $textAlignTdRight: false,\n  $caption: false,\n  $dark: false,\n  $light: false,\n  $withVerticalLines: false,\n  $dense: false,\n  $zebra: false,\n  $withVerticalHeader: false,\n  $textAlignRight: false,\n  $override: null,\n  $react: false\n) {\n  $className: 'table';\n\n  @if $override {\n    $className: $override;\n  }\n\n  @if $all or $base {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include base;\n    }\n  }\n\n  @if $all or $textAlignTdRight {\n    @include BemUtil.unscopedElement($className, 'content', $react) {\n      @include textAlignTdRight;\n    }\n  }\n\n  @if $all or $caption {\n    @include BemUtil.unscopedElement($className, 'caption', $react) {\n      @include caption;\n    }\n  }\n\n\n  @if $all or $dark {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include dark;\n    }\n  }\n\n  @if $all or $light {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include light;\n    }\n  }\n\n  @if $all or $withVerticalLines {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include withVerticalLines;\n    }\n  }\n\n  @if $all or $dense {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include dense;\n    }\n  }\n\n  @if $all or $zebra {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include zebra;\n    }\n  }\n\n  @if $all or $withVerticalHeader {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include withVerticalHeader;\n    }\n  }\n\n  @if $all or $textAlignRight {\n    @include BemUtil.unscopedModifier($className, 'text-align-right', $react) {\n      @include textAlignRight;\n    }\n  }\n\n  @if $all or $base {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include mobile;\n    }\n  }\n\n}\n"]}

package/lib/components/tag/tag.css

@@ -0,0 +1,219 @@
+.hds-icon {
+  background-color: currentcolor;
+  display: inline-block;
+  height: var(--icon-size);
+  -webkit-mask-image: var(--mask-image);
+  mask-image: var(--mask-image);
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: auto;
+  mask-size: auto;
+  width: var(--icon-size);
+}
+
+.hds-icon--size-xs {
+  --icon-size: var(--spacing-layout-2-xs);
+}
+
+.hds-icon--size-s {
+  --icon-size: var(--spacing-layout-xs);
+}
+
+.hds-icon--size-m {
+  --icon-size: var(--spacing-layout-s);
+}
+
+.hds-icon--size-l {
+  --icon-size: var(--spacing-layout-m);
+}
+
+.hds-icon--size-xl {
+  --icon-size: var(--spacing-layout-l);
+}
+
+[class*=hds-icon-start--]:before {
+  background-color: currentcolor;
+  content: "";
+  display: inline-flex;
+  height: var(--icon-size, 24px);
+  -webkit-mask-image: var(--mask-image-before);
+  mask-image: var(--mask-image-before);
+  -webkit-mask-position: center;
+          mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+          mask-size: contain;
+  width: var(--icon-size, 24px);
+}
+
+[class*=hds-icon-end--]:after {
+  background-color: currentcolor;
+  content: "";
+  display: inline-flex;
+  height: var(--icon-size, 24px);
+  -webkit-mask-image: var(--mask-image-after);
+  mask-image: var(--mask-image-after);
+  -webkit-mask-position: center;
+          mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+          mask-size: contain;
+  width: var(--icon-size, 24px);
+}
+
+.hds-icon--cross {
+  --mask-image-cross: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 7.5L13.5 12L18 16.5L16.5 18L12 13.5L7.5 18L6 16.5L10.5 12L6 7.5L7.5 6L12 10.5L16.5 6L18 7.5Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  --mask-image: var(--mask-image-cross);
+}
+
+.hds-icon-start--cross {
+  --mask-image-before: var(--mask-image-cross);
+}
+
+.hds-icon-end--cross {
+  --mask-image-after: var(--mask-image-cross);
+}
+
+.hds-tag {
+  /* logics, always falls back to previous (upper) if not given ->
+  (no) active color -> (no) hover color -> (no) focus color -> default color
+  */
+  --computed-background-color: var(--background-color, var(--color-black-10));
+  --computed-background-color-focus: var(--background-color-focus, var(--computed-background-color, transparent));
+  --computed-background-color-hover: var(--background-color-hover, var(--computed-background-color-focus, transparent));
+  --computed-background-color-active: var(--background-color-active, var(--computed-background-color-hover, transparent));
+  --computed-border-color: var(--border-color, var(--computed-background-color));
+  --computed-border-color-focus: var(--border-color-focus, var(--computed-border-color, transparent));
+  --computed-border-color-hover: var(--border-color-hover, var(--computed-border-color-focus, transparent));
+  --computed-border-color-active: var(--border-color-active, var(--computed-border-color-hover, transparent));
+  --computed-color: var(--color, --color-black-90);
+  --computed-color-focus: var(--color-focus, var(--computed-color, inherit));
+  --computed-color-hover: var(--color-hover, var(--computed-color-focus, inherit));
+  --computed-color-active: var(--color-active, var(--computed-color-hover, inherit));
+  --computed-outline-color: var(--outline-color, transparent);
+  --font-size: var(--fontsize-body-s);
+  --gap: var(--spacing-3-xs);
+  --height: 32px;
+  --icon-reposition: -4px;
+  --icon-size: 24px;
+  --outline-width: 2px;
+  --padding-horizontal: 12px;
+  --padding-vertical: 3px;
+  align-items: center;
+  background-color: var(--computed-background-color);
+  border-radius: calc(var(--height) / 2);
+  box-sizing: border-box;
+  color: var(--computed-color, inherit);
+  display: inline-flex;
+  flex-direction: row;
+  font-size: var(--font-size);
+  font-weight: 500;
+  grid-gap: var(--gap);
+  gap: var(--gap);
+  justify-content: center;
+  line-height: var(--lineheight-l);
+  max-width: 100%;
+  min-height: var(--height);
+  outline: none;
+  outline-offset: 2px;
+  overflow: hidden;
+  padding: var(--padding-vertical) var(--padding-horizontal);
+  /* repositioning the icons, after & before usage */
+}
+
+.hds-tag:after {
+  flex-shrink: 0;
+  margin-right: var(--icon-reposition);
+}
+
+.hds-tag:before {
+  flex-shrink: 0;
+  margin-left: var(--icon-reposition);
+}
+
+.hds-tag > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hds-tag--large {
+  --font-size: var(--fontsize-body-m);
+  --gap: var(--spacing-2-xs);
+  --height: 48px;
+  --icon-reposition: -8px;
+  --outline-width: 3px;
+  --padding-horizontal: 20px;
+  --padding-vertical: 10px;
+}
+
+.hds-tag--action {
+  --border-color: var(--color-black-90);
+  border: 1px solid var(--computed-border-color);
+  padding: calc(var(--padding-vertical) - 1px) calc(var(--padding-horizontal) - 1px);
+}
+
+.hds-tag--multiline > span {
+  hyphens: auto;
+  white-space: initial;
+}
+
+.hds-tag--link {
+  text-decoration: underline;
+}
+
+.hds-tag--action, .hds-tag--link {
+  --background-color-hover: var(--color-black-20);
+  --outline-color: var(--color-focus-outline);
+  cursor: pointer;
+  /* focus */
+}
+
+.hds-tag--action:focus-visible, .hds-tag--link:focus-visible {
+  background-color: var(--computed-background-color-focus);
+  border-color: var(--computed-border-color-focus);
+  color: var(--computed-color-focus);
+}
+
+.hds-tag--action, .hds-tag--link {
+  /* hover */
+}
+
+.hds-tag--action:hover, .hds-tag--link:hover {
+  background-color: var(--computed-background-color-hover);
+  border-color: var(--computed-border-color-hover);
+  color: var(--computed-color-hover);
+}
+
+.hds-tag--action, .hds-tag--link {
+  /* active */
+}
+
+.hds-tag--action:active, .hds-tag--link:active {
+  background-color: var(--computed-background-color-active);
+  border-color: var(--computed-border-color-active);
+  color: var(--computed-color-active);
+}
+
+.hds-tag--action:focus-visible, .hds-tag--action:active:hover, .hds-tag--link:focus-visible, .hds-tag--link:active:hover {
+  box-shadow: none;
+  outline: var(--outline-width) solid var(--computed-outline-color);
+}
+
+.hds-tag__icon, .hds-icon.hds-tag__icon {
+  flex-shrink: 0;
+  height: var(--icon-size);
+  width: var(--icon-size);
+}
+
+.hds-tag__icon:first-child {
+  margin-left: var(--icon-reposition);
+}
+
+.hds-tag__icon:last-child {
+  margin-right: var(--icon-reposition);
+}

package/lib/components/tag/tag.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/icons/icon.css","../../../src/components/tag/tag.css","../../../src/icons/cross.css","../../../src/components/tag/tag.css%23sass"],"names":[],"mappings":"AAAA;ECCA,8BDAE;EACA,qBAAA;ECCF,wBAAA;EDCE,qCAAA;EACA,6BAAA;EACA,6BAAA;EACA,qBAAA;EACA,8BAAA;EACA,sBAAA;EACA,uBAAA;EACA,eAAA;EACA,uBAAA;ACCF;;ADEA;EACE,uCAAA;ACCF;;ADEA;EACE,qCAAA;ACCF;;ADEA;EACE,oCAAA;ACCF;;ADEA;EACE,oCAAA;ACCF;;ADEA;EACE,oCAAA;ACCF;;ADEA;EACE,8BAAA;EACA,WAAA;EACA,oBAAA;EACA,8BAAA;EACA,4CAAA;EACA,oCAAA;EACA,6BAAA;UAAA,qBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,0BAAA;UAAA,kBAAA;EACA,6BAAA;ACCF;;ADEA;EACE,8BAAA;EACA,WAAA;EACA,oBAAA;EACA,8BAAA;EACA,2CAAA;EACA,mCAAA;EACA,6BAAA;UAAA,qBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,0BAAA;UAAA,kBAAA;EACA,6BAAA;ACCF;;AC3DA;EACE,yUAAA;EACA,qCAAA;AD8DF;;AC3DA;EACE,4CAAA;AD8DF;;AC3DA;EACE,2CAAA;AD8DF;;AErEA;EACE;;GAAA;EAGA,2EAAA;EACA,+GAAA;EACA,qHAAA;EFwEF,uHAAA;EEtEE,8EAAA;EFwEF,mGAAA;EEtEE,yGAAA;EACA,2GAAA;EACA,gDAAA;EACA,0EAAA;EFwEF,gFAAA;EEtEE,kFAAA;EFwEF,2DAAA;EEtEE,mCAAA;EFwEF,0BAAA;EEtEE,cAAA;EFwEF,uBAAA;EEtEE,iBAAA;EACA,oBAAA;EACA,0BAAA;EACA,uBAAA;EAEA,mBAAA;EACA,kDAAA;EACA,sCAAA;EACA,sBAAA;EACA,qCAAA;EACA,oBAAA;EACA,mBAAA;EACA,2BAAA;EACA,gBAAA;EACA,oBAAA;EAAA,eAAA;EACA,uBAAA;EACA,gCAAA;EACA,eAAA;EACA,yBAAA;EACA,aAAA;EACA,mBAAA;EACA,gBAAA;EACA,0DAAA;EAEA,kDAAA;AFsEF;;AErEE;EACE,cAAA;EACA,oCAAA;AFuEJ;;AEpEE;EACE,cAAA;EFsEJ,mCAAA;AACA;;AEnEE;EACE,gBAAA;EACA,uBAAA;EACA,mBAAA;AFqEJ;;AEjEA;EACE,mCAAA;EFoEF,0BAAA;EElEE,cAAA;EFoEF,uBAAA;EElEE,oBAAA;EFoEF,0BAAA;EElEE,wBAAA;AFoEF;;AEjEA;EACE,qCAAA;EAEA,8CAAA;EACA,kFAAA;AFmEF;;AE/DE;EACE,aAAA;EACA,oBAAA;AFkEJ;;AE9DA;EACE,0BAAA;AFiEF;;AE9DA;EACE,+CAAA;EACA,2CAAA;EAEA,eAAA;EAEA,UAAA;AF+DF;;AE9DE;EACE,wDAAA;EACA,gDAAA;EACA,kCAAA;AFgEJ;;AE1EA;EAaE,UAAA;AFgEF;;AE/DE;EACE,wDAAA;EACA,gDAAA;EACA,kCAAA;AFiEJ;;AElFA;EAoBE,WAAA;AFiEF;;AEhEE;EACE,yDAAA;EACA,iDAAA;EACA,mCAAA;AFkEJ;;AE/DE;EACE,gBAAA;EACA,iEAAA;AFiEJ;;AE7DA;EACE,cAAA;EACA,wBAAA;EACA,uBAAA;AFgEF;;AE7DA;EACE,mCAAA;AFgEF;;AE7DA;EACE,oCAAA;AFgEF","file":"tag.css","sourcesContent":[".hds-icon {\n  background-color: currentcolor;\n  display: inline-block;\n  height: var(--icon-size);\n  -webkit-mask-image: var(--mask-image);\n  mask-image: var(--mask-image);\n  -webkit-mask-position: center;\n  mask-position: center;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: auto;\n  mask-size: auto;\n  width: var(--icon-size);\n}\n\n.hds-icon--size-xs {\n  --icon-size: var(--spacing-layout-2-xs);\n}\n\n.hds-icon--size-s {\n  --icon-size: var(--spacing-layout-xs);\n}\n\n.hds-icon--size-m {\n  --icon-size: var(--spacing-layout-s);\n}\n\n.hds-icon--size-l {\n  --icon-size: var(--spacing-layout-m);\n}\n\n.hds-icon--size-xl {\n  --icon-size: var(--spacing-layout-l);\n}\n\n[class*=\"hds-icon-start--\"]:before {  \n  background-color: currentcolor;\n  content: \"\";\n  display: inline-flex;\n  height: var(--icon-size, 24px);\n  -webkit-mask-image: var(--mask-image-before);\n  mask-image: var(--mask-image-before);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  width: var(--icon-size, 24px);\n}\n\n[class*=\"hds-icon-end--\"]:after {\n  background-color: currentcolor;\n  content: \"\";\n  display: inline-flex;\n  height: var(--icon-size, 24px);\n  -webkit-mask-image: var(--mask-image-after);\n  mask-image: var(--mask-image-after);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  width: var(--icon-size, 24px);\n}\n","@use '../../icons/icon.css';\n@use '../../icons/cross.css';\n\n.hds-tag {\n  /* logics, always falls back to previous (upper) if not given ->\n  (no) active color -> (no) hover color -> (no) focus color -> default color\n  */\n  --computed-background-color: var(--background-color, var(--color-black-10));\n  --computed-background-color-focus: var(--background-color-focus, var(--computed-background-color, transparent));\n  --computed-background-color-hover: var(--background-color-hover, var(--computed-background-color-focus, transparent));\n  --computed-background-color-active: var(--background-color-active, var(--computed-background-color-hover, transparent));\n  --computed-border-color: var(--border-color, var(--computed-background-color));\n  --computed-border-color-focus: var(--border-color-focus, var(--computed-border-color, transparent));\n  --computed-border-color-hover: var(--border-color-hover, var(--computed-border-color-focus, transparent));\n  --computed-border-color-active: var(--border-color-active, var(--computed-border-color-hover, transparent));\n  --computed-color: var(--color, --color-black-90);\n  --computed-color-focus: var(--color-focus, var(--computed-color, inherit));\n  --computed-color-hover: var(--color-hover, var(--computed-color-focus, inherit));\n  --computed-color-active: var(--color-active, var(--computed-color-hover, inherit));\n  --computed-outline-color: var(--outline-color, transparent);\n  --font-size: var(--fontsize-body-s);\n  --gap: var(--spacing-3-xs);\n  --height: 32px;\n  --icon-reposition: -4px;\n  --icon-size: 24px;\n  --outline-width: 2px;\n  --padding-horizontal: 12px;\n  --padding-vertical: 3px;\n\n  align-items: center;\n  background-color: var(--computed-background-color);\n  border-radius: calc(var(--height) / 2);\n  box-sizing: border-box;\n  color: var(--computed-color, inherit);\n  display: inline-flex;\n  flex-direction: row;\n  font-size: var(--font-size);\n  font-weight: 500;\n  gap: var(--gap);\n  justify-content: center;\n  line-height: var(--lineheight-l);\n  max-width: 100%;\n  min-height: var(--height);\n  outline: none;\n  outline-offset: 2px;\n  overflow: hidden;\n  padding: var(--padding-vertical) var(--padding-horizontal);\n\n  /* repositioning the icons, after & before usage */\n  &:after {\n    flex-shrink: 0;\n    margin-right: var(--icon-reposition);\n  }\n  \n  &:before {\n    flex-shrink: 0;\n    margin-left: var(--icon-reposition);\n  }\n\n  > span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n.hds-tag--large {\n  --font-size: var(--fontsize-body-m);\n  --gap: var(--spacing-2-xs);\n  --height: 48px;\n  --icon-reposition: -8px;\n  --outline-width: 3px;\n  --padding-horizontal: 20px;\n  --padding-vertical: 10px;\n}\n\n.hds-tag--action {\n  --border-color: var(--color-black-90);\n\n  border: 1px solid var(--computed-border-color);\n  padding: calc(var(--padding-vertical) - 1px) calc(var(--padding-horizontal) - 1px);\n}\n\n.hds-tag--multiline {\n  > span {\n    hyphens: auto;\n    white-space: initial;\n  }\n}\n\n.hds-tag--link {\n  text-decoration: underline;\n}\n\n.hds-tag--action, .hds-tag--link {\n  --background-color-hover: var(--color-black-20);\n  --outline-color: var(--color-focus-outline);\n\n  cursor: pointer;\n\n  /* focus */\n  &:focus-visible {\n    background-color: var(--computed-background-color-focus);\n    border-color: var(--computed-border-color-focus);\n    color: var(--computed-color-focus);\n  }\n\n  /* hover */\n  &:hover {\n    background-color: var(--computed-background-color-hover);\n    border-color: var(--computed-border-color-hover);\n    color: var(--computed-color-hover);\n  }\n\n  /* active */\n  &:active {\n    background-color: var(--computed-background-color-active);\n    border-color: var(--computed-border-color-active);\n    color: var(--computed-color-active);\n  }\n\n  &:focus-visible, &:active:hover {\n    box-shadow: none;\n    outline: var(--outline-width) solid var(--computed-outline-color);\n  }\n}\n\n.hds-tag__icon, .hds-icon.hds-tag__icon {\n  flex-shrink: 0;\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\n\n.hds-tag__icon:first-child {\n  margin-left: var(--icon-reposition);\n}\n\n.hds-tag__icon:last-child {\n  margin-right: var(--icon-reposition);\n}",".hds-icon--cross {\n  --mask-image-cross: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 7.5L13.5 12L18 16.5L16.5 18L12 13.5L7.5 18L6 16.5L10.5 12L6 7.5L7.5 6L12 10.5L16.5 6L18 7.5Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-cross);\n}\n\n.hds-icon-start--cross {\n  --mask-image-before: var(--mask-image-cross);\n}\n\n.hds-icon-end--cross {\n  --mask-image-after: var(--mask-image-cross);\n}\n","@use '../../icons/icon.css';\n@use '../../icons/cross.css';\n\n.hds-tag {\n  /* logics, always falls back to previous (upper) if not given ->\n  (no) active color -> (no) hover color -> (no) focus color -> default color\n  */\n  --computed-background-color: var(--background-color, var(--color-black-10));\n  --computed-background-color-focus: var(--background-color-focus, var(--computed-background-color, transparent));\n  --computed-background-color-hover: var(--background-color-hover, var(--computed-background-color-focus, transparent));\n  --computed-background-color-active: var(--background-color-active, var(--computed-background-color-hover, transparent));\n  --computed-border-color: var(--border-color, var(--computed-background-color));\n  --computed-border-color-focus: var(--border-color-focus, var(--computed-border-color, transparent));\n  --computed-border-color-hover: var(--border-color-hover, var(--computed-border-color-focus, transparent));\n  --computed-border-color-active: var(--border-color-active, var(--computed-border-color-hover, transparent));\n  --computed-color: var(--color, --color-black-90);\n  --computed-color-focus: var(--color-focus, var(--computed-color, inherit));\n  --computed-color-hover: var(--color-hover, var(--computed-color-focus, inherit));\n  --computed-color-active: var(--color-active, var(--computed-color-hover, inherit));\n  --computed-outline-color: var(--outline-color, transparent);\n  --font-size: var(--fontsize-body-s);\n  --gap: var(--spacing-3-xs);\n  --height: 32px;\n  --icon-reposition: -4px;\n  --icon-size: 24px;\n  --outline-width: 2px;\n  --padding-horizontal: 12px;\n  --padding-vertical: 3px;\n\n  align-items: center;\n  background-color: var(--computed-background-color);\n  border-radius: calc(var(--height) / 2);\n  box-sizing: border-box;\n  color: var(--computed-color, inherit);\n  display: inline-flex;\n  flex-direction: row;\n  font-size: var(--font-size);\n  font-weight: 500;\n  gap: var(--gap);\n  justify-content: center;\n  line-height: var(--lineheight-l);\n  max-width: 100%;\n  min-height: var(--height);\n  outline: none;\n  outline-offset: 2px;\n  overflow: hidden;\n  padding: var(--padding-vertical) var(--padding-horizontal);\n\n  /* repositioning the icons, after & before usage */\n  &:after {\n    flex-shrink: 0;\n    margin-right: var(--icon-reposition);\n  }\n  \n  &:before {\n    flex-shrink: 0;\n    margin-left: var(--icon-reposition);\n  }\n\n  > span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n.hds-tag--large {\n  --font-size: var(--fontsize-body-m);\n  --gap: var(--spacing-2-xs);\n  --height: 48px;\n  --icon-reposition: -8px;\n  --outline-width: 3px;\n  --padding-horizontal: 20px;\n  --padding-vertical: 10px;\n}\n\n.hds-tag--action {\n  --border-color: var(--color-black-90);\n\n  border: 1px solid var(--computed-border-color);\n  padding: calc(var(--padding-vertical) - 1px) calc(var(--padding-horizontal) - 1px);\n}\n\n.hds-tag--multiline {\n  > span {\n    hyphens: auto;\n    white-space: initial;\n  }\n}\n\n.hds-tag--link {\n  text-decoration: underline;\n}\n\n.hds-tag--action, .hds-tag--link {\n  --background-color-hover: var(--color-black-20);\n  --outline-color: var(--color-focus-outline);\n\n  cursor: pointer;\n\n  /* focus */\n  &:focus-visible {\n    background-color: var(--computed-background-color-focus);\n    border-color: var(--computed-border-color-focus);\n    color: var(--computed-color-focus);\n  }\n\n  /* hover */\n  &:hover {\n    background-color: var(--computed-background-color-hover);\n    border-color: var(--computed-border-color-hover);\n    color: var(--computed-color-hover);\n  }\n\n  /* active */\n  &:active {\n    background-color: var(--computed-background-color-active);\n    border-color: var(--computed-border-color-active);\n    color: var(--computed-color-active);\n  }\n\n  &:focus-visible, &:active:hover {\n    box-shadow: none;\n    outline: var(--outline-width) solid var(--computed-outline-color);\n  }\n}\n\n.hds-tag__icon, .hds-icon.hds-tag__icon {\n  flex-shrink: 0;\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\n\n.hds-tag__icon:first-child {\n  margin-left: var(--icon-reposition);\n}\n\n.hds-tag__icon:last-child {\n  margin-right: var(--icon-reposition);\n}"]}

package/lib/components/tag/tag.min.css

@@ -0,0 +1 @@
+.hds-icon{background-color:currentcolor;display:inline-block;height:var(--icon-size);-webkit-mask-image:var(--mask-image);mask-image:var(--mask-image);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto;width:var(--icon-size)}.hds-icon--size-xs{--icon-size:var(--spacing-layout-2-xs)}.hds-icon--size-s{--icon-size:var(--spacing-layout-xs)}.hds-icon--size-m{--icon-size:var(--spacing-layout-s)}.hds-icon--size-l{--icon-size:var(--spacing-layout-m)}.hds-icon--size-xl{--icon-size:var(--spacing-layout-l)}[class*=hds-icon-start--]:before{-webkit-mask-image:var(--mask-image-before);mask-image:var(--mask-image-before)}[class*=hds-icon-end--]:after,[class*=hds-icon-start--]:before{background-color:currentcolor;content:"";display:inline-flex;height:var(--icon-size,24px);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:var(--icon-size,24px)}[class*=hds-icon-end--]:after{-webkit-mask-image:var(--mask-image-after);mask-image:var(--mask-image-after)}.hds-icon--cross{--mask-image-cross:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 7.5L13.5 12l4.5 4.5-1.5 1.5-4.5-4.5L7.5 18 6 16.5l4.5-4.5L6 7.5 7.5 6l4.5 4.5L16.5 6 18 7.5z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-cross)}.hds-icon-start--cross{--mask-image-before:var(--mask-image-cross)}.hds-icon-end--cross{--mask-image-after:var(--mask-image-cross)}.hds-tag{--computed-background-color:var(--background-color,var(--color-black-10));--computed-background-color-focus:var(--background-color-focus,var(--computed-background-color,transparent));--computed-background-color-hover:var(--background-color-hover,var(--computed-background-color-focus,transparent));--computed-background-color-active:var(--background-color-active,var(--computed-background-color-hover,transparent));--computed-border-color:var(--border-color,var(--computed-background-color));--computed-border-color-focus:var(--border-color-focus,var(--computed-border-color,transparent));--computed-border-color-hover:var(--border-color-hover,var(--computed-border-color-focus,transparent));--computed-border-color-active:var(--border-color-active,var(--computed-border-color-hover,transparent));--computed-color:var(--color,--color-black-90);--computed-color-focus:var(--color-focus,var(--computed-color,inherit));--computed-color-hover:var(--color-hover,var(--computed-color-focus,inherit));--computed-color-active:var(--color-active,var(--computed-color-hover,inherit));--computed-outline-color:var(--outline-color,transparent);--font-size:var(--fontsize-body-s);--gap:var(--spacing-3-xs);--height:32px;--icon-reposition:-4px;--icon-size:24px;--outline-width:2px;--padding-horizontal:12px;--padding-vertical:3px;align-items:center;background-color:var(--computed-background-color);border-radius:calc(var(--height) / 2);box-sizing:border-box;color:var(--computed-color,inherit);display:inline-flex;flex-direction:row;font-size:var(--font-size);font-weight:500;grid-gap:var(--gap);gap:var(--gap);justify-content:center;line-height:var(--lineheight-l);max-width:100%;min-height:var(--height);outline:none;outline-offset:2px;overflow:hidden;padding:var(--padding-vertical) var(--padding-horizontal)}.hds-tag:after{flex-shrink:0;margin-right:var(--icon-reposition)}.hds-tag:before{flex-shrink:0;margin-left:var(--icon-reposition)}.hds-tag>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hds-tag--large{--font-size:var(--fontsize-body-m);--gap:var(--spacing-2-xs);--height:48px;--icon-reposition:-8px;--outline-width:3px;--padding-horizontal:20px;--padding-vertical:10px}.hds-tag--action{--border-color:var(--color-black-90);border:1px solid var(--computed-border-color);padding:calc(var(--padding-vertical) - 1px) calc(var(--padding-horizontal) - 1px)}.hds-tag--multiline>span{hyphens:auto;white-space:normal}.hds-tag--link{text-decoration:underline}.hds-tag--action,.hds-tag--link{--background-color-hover:var(--color-black-20);--outline-color:var(--color-focus-outline);cursor:pointer}.hds-tag--action:focus-visible,.hds-tag--link:focus-visible{background-color:var(--computed-background-color-focus);border-color:var(--computed-border-color-focus);color:var(--computed-color-focus)}.hds-tag--action:hover,.hds-tag--link:hover{background-color:var(--computed-background-color-hover);border-color:var(--computed-border-color-hover);color:var(--computed-color-hover)}.hds-tag--action:active,.hds-tag--link:active{background-color:var(--computed-background-color-active);border-color:var(--computed-border-color-active);color:var(--computed-color-active)}.hds-tag--action:active:hover,.hds-tag--action:focus-visible,.hds-tag--link:active:hover,.hds-tag--link:focus-visible{box-shadow:none;outline:var(--outline-width) solid var(--computed-outline-color)}.hds-icon.hds-tag__icon,.hds-tag__icon{flex-shrink:0;height:var(--icon-size);width:var(--icon-size)}.hds-tag__icon:first-child{margin-left:var(--icon-reposition)}.hds-tag__icon:last-child{margin-right:var(--icon-reposition)}

package/lib/components/tag/tag.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/icons/icon.css","../../../src/components/tag/tag.css","../../../src/icons/cross.css","../../../src/components/tag/tag.css%23sass"],"names":[],"mappings":"AAAA,UCCA,6BDAE,CACA,oBAAA,CCCF,uBAAA,CDCE,oCAAA,CACA,4BAAA,CACA,4BAAA,CACA,oBAAA,CACA,6BAAA,CACA,qBAAA,CACA,sBAAA,CACA,cAAA,CACA,sBCCF,CDEA,mBACE,sCCCF,CDEA,kBACE,oCCCF,CDEA,kBACE,mCCCF,CDEA,kBACE,mCCCF,CDEA,mBACE,mCCCF,CDEA,iCAKE,2CAAA,CACA,mCCKF,CDEA,+DAZE,6BAAA,CACA,UAAA,CACA,mBAAA,CACA,4BAAA,CAGA,4BAAA,CAAA,oBAAA,CACA,6BAAA,CAAA,qBAAA,CACA,yBAAA,CAAA,iBAAA,CACA,2BCcF,CDXA,8BAKE,0CAAA,CACA,kCCKF,CC3DA,iBACE,iTAAA,CACA,oCD8DF,CC3DA,uBACE,2CD8DF,CC3DA,qBACE,0CD8DF,CErEA,SAIE,yEAAA,CACA,4GAAA,CACA,kHAAA,CFwEF,oHAAA,CEtEE,4EAAA,CFwEF,gGAAA,CEtEE,sGAAA,CACA,wGAAA,CACA,8CAAA,CACA,uEAAA,CFwEF,6EAAA,CEtEE,+EAAA,CFwEF,yDAAA,CEtEE,kCAAA,CFwEF,yBAAA,CEtEE,aAAA,CFwEF,sBAAA,CEtEE,gBAAA,CACA,mBAAA,CACA,yBAAA,CACA,sBAAA,CAEA,kBAAA,CACA,iDAAA,CACA,qCAAA,CACA,qBAAA,CACA,mCAAA,CACA,mBAAA,CACA,kBAAA,CACA,0BAAA,CACA,eAAA,CACA,mBAAA,CAAA,cAAA,CACA,sBAAA,CACA,+BAAA,CACA,cAAA,CACA,wBAAA,CACA,YAAA,CACA,kBAAA,CACA,eAAA,CACA,yDFwEF,CErEE,eACE,aAAA,CACA,mCFuEJ,CEpEE,gBACE,aAAA,CFsEJ,kCACA,CEnEE,cACE,eAAA,CACA,sBAAA,CACA,kBFqEJ,CEjEA,gBACE,kCAAA,CFoEF,yBAAA,CElEE,aAAA,CFoEF,sBAAA,CElEE,mBAAA,CFoEF,yBAAA,CElEE,uBFoEF,CEjEA,iBACE,oCAAA,CAEA,6CAAA,CACA,iFFmEF,CE/DE,yBACE,YAAA,CACA,kBFkEJ,CE9DA,eACE,yBFiEF,CE9DA,gCACE,8CAAA,CACA,0CAAA,CAEA,cFiEF,CE9DE,4DACE,uDAAA,CACA,+CAAA,CACA,iCFgEJ,CE5DE,4CACE,uDAAA,CACA,+CAAA,CACA,iCFiEJ,CE7DE,8CACE,wDAAA,CACA,gDAAA,CACA,kCFkEJ,CE/DE,sHACE,eAAA,CACA,gEFiEJ,CE7DA,uCACE,aAAA,CACA,uBAAA,CACA,sBFgEF,CE7DA,2BACE,kCFgEF,CE7DA,0BACE,mCFgEF","file":"tag.min.css","sourcesContent":[".hds-icon {\n  background-color: currentcolor;\n  display: inline-block;\n  height: var(--icon-size);\n  -webkit-mask-image: var(--mask-image);\n  mask-image: var(--mask-image);\n  -webkit-mask-position: center;\n  mask-position: center;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: auto;\n  mask-size: auto;\n  width: var(--icon-size);\n}\n\n.hds-icon--size-xs {\n  --icon-size: var(--spacing-layout-2-xs);\n}\n\n.hds-icon--size-s {\n  --icon-size: var(--spacing-layout-xs);\n}\n\n.hds-icon--size-m {\n  --icon-size: var(--spacing-layout-s);\n}\n\n.hds-icon--size-l {\n  --icon-size: var(--spacing-layout-m);\n}\n\n.hds-icon--size-xl {\n  --icon-size: var(--spacing-layout-l);\n}\n\n[class*=\"hds-icon-start--\"]:before {  \n  background-color: currentcolor;\n  content: \"\";\n  display: inline-flex;\n  height: var(--icon-size, 24px);\n  -webkit-mask-image: var(--mask-image-before);\n  mask-image: var(--mask-image-before);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  width: var(--icon-size, 24px);\n}\n\n[class*=\"hds-icon-end--\"]:after {\n  background-color: currentcolor;\n  content: \"\";\n  display: inline-flex;\n  height: var(--icon-size, 24px);\n  -webkit-mask-image: var(--mask-image-after);\n  mask-image: var(--mask-image-after);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  width: var(--icon-size, 24px);\n}\n","@use '../../icons/icon.css';\n@use '../../icons/cross.css';\n\n.hds-tag {\n  /* logics, always falls back to previous (upper) if not given ->\n  (no) active color -> (no) hover color -> (no) focus color -> default color\n  */\n  --computed-background-color: var(--background-color, var(--color-black-10));\n  --computed-background-color-focus: var(--background-color-focus, var(--computed-background-color, transparent));\n  --computed-background-color-hover: var(--background-color-hover, var(--computed-background-color-focus, transparent));\n  --computed-background-color-active: var(--background-color-active, var(--computed-background-color-hover, transparent));\n  --computed-border-color: var(--border-color, var(--computed-background-color));\n  --computed-border-color-focus: var(--border-color-focus, var(--computed-border-color, transparent));\n  --computed-border-color-hover: var(--border-color-hover, var(--computed-border-color-focus, transparent));\n  --computed-border-color-active: var(--border-color-active, var(--computed-border-color-hover, transparent));\n  --computed-color: var(--color, --color-black-90);\n  --computed-color-focus: var(--color-focus, var(--computed-color, inherit));\n  --computed-color-hover: var(--color-hover, var(--computed-color-focus, inherit));\n  --computed-color-active: var(--color-active, var(--computed-color-hover, inherit));\n  --computed-outline-color: var(--outline-color, transparent);\n  --font-size: var(--fontsize-body-s);\n  --gap: var(--spacing-3-xs);\n  --height: 32px;\n  --icon-reposition: -4px;\n  --icon-size: 24px;\n  --outline-width: 2px;\n  --padding-horizontal: 12px;\n  --padding-vertical: 3px;\n\n  align-items: center;\n  background-color: var(--computed-background-color);\n  border-radius: calc(var(--height) / 2);\n  box-sizing: border-box;\n  color: var(--computed-color, inherit);\n  display: inline-flex;\n  flex-direction: row;\n  font-size: var(--font-size);\n  font-weight: 500;\n  gap: var(--gap);\n  justify-content: center;\n  line-height: var(--lineheight-l);\n  max-width: 100%;\n  min-height: var(--height);\n  outline: none;\n  outline-offset: 2px;\n  overflow: hidden;\n  padding: var(--padding-vertical) var(--padding-horizontal);\n\n  /* repositioning the icons, after & before usage */\n  &:after {\n    flex-shrink: 0;\n    margin-right: var(--icon-reposition);\n  }\n  \n  &:before {\n    flex-shrink: 0;\n    margin-left: var(--icon-reposition);\n  }\n\n  > span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n.hds-tag--large {\n  --font-size: var(--fontsize-body-m);\n  --gap: var(--spacing-2-xs);\n  --height: 48px;\n  --icon-reposition: -8px;\n  --outline-width: 3px;\n  --padding-horizontal: 20px;\n  --padding-vertical: 10px;\n}\n\n.hds-tag--action {\n  --border-color: var(--color-black-90);\n\n  border: 1px solid var(--computed-border-color);\n  padding: calc(var(--padding-vertical) - 1px) calc(var(--padding-horizontal) - 1px);\n}\n\n.hds-tag--multiline {\n  > span {\n    hyphens: auto;\n    white-space: initial;\n  }\n}\n\n.hds-tag--link {\n  text-decoration: underline;\n}\n\n.hds-tag--action, .hds-tag--link {\n  --background-color-hover: var(--color-black-20);\n  --outline-color: var(--color-focus-outline);\n\n  cursor: pointer;\n\n  /* focus */\n  &:focus-visible {\n    background-color: var(--computed-background-color-focus);\n    border-color: var(--computed-border-color-focus);\n    color: var(--computed-color-focus);\n  }\n\n  /* hover */\n  &:hover {\n    background-color: var(--computed-background-color-hover);\n    border-color: var(--computed-border-color-hover);\n    color: var(--computed-color-hover);\n  }\n\n  /* active */\n  &:active {\n    background-color: var(--computed-background-color-active);\n    border-color: var(--computed-border-color-active);\n    color: var(--computed-color-active);\n  }\n\n  &:focus-visible, &:active:hover {\n    box-shadow: none;\n    outline: var(--outline-width) solid var(--computed-outline-color);\n  }\n}\n\n.hds-tag__icon, .hds-icon.hds-tag__icon {\n  flex-shrink: 0;\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\n\n.hds-tag__icon:first-child {\n  margin-left: var(--icon-reposition);\n}\n\n.hds-tag__icon:last-child {\n  margin-right: var(--icon-reposition);\n}",".hds-icon--cross {\n  --mask-image-cross: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 7.5L13.5 12L18 16.5L16.5 18L12 13.5L7.5 18L6 16.5L10.5 12L6 7.5L7.5 6L12 10.5L16.5 6L18 7.5Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-cross);\n}\n\n.hds-icon-start--cross {\n  --mask-image-before: var(--mask-image-cross);\n}\n\n.hds-icon-end--cross {\n  --mask-image-after: var(--mask-image-cross);\n}\n","@use '../../icons/icon.css';\n@use '../../icons/cross.css';\n\n.hds-tag {\n  /* logics, always falls back to previous (upper) if not given ->\n  (no) active color -> (no) hover color -> (no) focus color -> default color\n  */\n  --computed-background-color: var(--background-color, var(--color-black-10));\n  --computed-background-color-focus: var(--background-color-focus, var(--computed-background-color, transparent));\n  --computed-background-color-hover: var(--background-color-hover, var(--computed-background-color-focus, transparent));\n  --computed-background-color-active: var(--background-color-active, var(--computed-background-color-hover, transparent));\n  --computed-border-color: var(--border-color, var(--computed-background-color));\n  --computed-border-color-focus: var(--border-color-focus, var(--computed-border-color, transparent));\n  --computed-border-color-hover: var(--border-color-hover, var(--computed-border-color-focus, transparent));\n  --computed-border-color-active: var(--border-color-active, var(--computed-border-color-hover, transparent));\n  --computed-color: var(--color, --color-black-90);\n  --computed-color-focus: var(--color-focus, var(--computed-color, inherit));\n  --computed-color-hover: var(--color-hover, var(--computed-color-focus, inherit));\n  --computed-color-active: var(--color-active, var(--computed-color-hover, inherit));\n  --computed-outline-color: var(--outline-color, transparent);\n  --font-size: var(--fontsize-body-s);\n  --gap: var(--spacing-3-xs);\n  --height: 32px;\n  --icon-reposition: -4px;\n  --icon-size: 24px;\n  --outline-width: 2px;\n  --padding-horizontal: 12px;\n  --padding-vertical: 3px;\n\n  align-items: center;\n  background-color: var(--computed-background-color);\n  border-radius: calc(var(--height) / 2);\n  box-sizing: border-box;\n  color: var(--computed-color, inherit);\n  display: inline-flex;\n  flex-direction: row;\n  font-size: var(--font-size);\n  font-weight: 500;\n  gap: var(--gap);\n  justify-content: center;\n  line-height: var(--lineheight-l);\n  max-width: 100%;\n  min-height: var(--height);\n  outline: none;\n  outline-offset: 2px;\n  overflow: hidden;\n  padding: var(--padding-vertical) var(--padding-horizontal);\n\n  /* repositioning the icons, after & before usage */\n  &:after {\n    flex-shrink: 0;\n    margin-right: var(--icon-reposition);\n  }\n  \n  &:before {\n    flex-shrink: 0;\n    margin-left: var(--icon-reposition);\n  }\n\n  > span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n.hds-tag--large {\n  --font-size: var(--fontsize-body-m);\n  --gap: var(--spacing-2-xs);\n  --height: 48px;\n  --icon-reposition: -8px;\n  --outline-width: 3px;\n  --padding-horizontal: 20px;\n  --padding-vertical: 10px;\n}\n\n.hds-tag--action {\n  --border-color: var(--color-black-90);\n\n  border: 1px solid var(--computed-border-color);\n  padding: calc(var(--padding-vertical) - 1px) calc(var(--padding-horizontal) - 1px);\n}\n\n.hds-tag--multiline {\n  > span {\n    hyphens: auto;\n    white-space: initial;\n  }\n}\n\n.hds-tag--link {\n  text-decoration: underline;\n}\n\n.hds-tag--action, .hds-tag--link {\n  --background-color-hover: var(--color-black-20);\n  --outline-color: var(--color-focus-outline);\n\n  cursor: pointer;\n\n  /* focus */\n  &:focus-visible {\n    background-color: var(--computed-background-color-focus);\n    border-color: var(--computed-border-color-focus);\n    color: var(--computed-color-focus);\n  }\n\n  /* hover */\n  &:hover {\n    background-color: var(--computed-background-color-hover);\n    border-color: var(--computed-border-color-hover);\n    color: var(--computed-color-hover);\n  }\n\n  /* active */\n  &:active {\n    background-color: var(--computed-background-color-active);\n    border-color: var(--computed-border-color-active);\n    color: var(--computed-color-active);\n  }\n\n  &:focus-visible, &:active:hover {\n    box-shadow: none;\n    outline: var(--outline-width) solid var(--computed-outline-color);\n  }\n}\n\n.hds-tag__icon, .hds-icon.hds-tag__icon {\n  flex-shrink: 0;\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\n\n.hds-tag__icon:first-child {\n  margin-left: var(--icon-reposition);\n}\n\n.hds-tag__icon:last-child {\n  margin-right: var(--icon-reposition);\n}"]}