@jorilindell/hds-core 4.10.1

package/lib/components/radio-button/radio-button.css

@@ -0,0 +1,201 @@
+.hds-radio-button {
+  --size: 24px;
+  /* icon (circle) size relative to the radio button size (--size) */
+  --icon-scale: 0.5;
+  --border-width: 2px;
+  --outline-width: 3px;
+  --label-font-size: var(--fontsize-body-m);
+  --label-padding: var(--spacing-2-xs);
+  --background: var(--color-white);
+  --background-hover: var(--color-white);
+  --background-focus: var(--color-white);
+  --background-unselected-disabled: var(--color-black-10);
+  --background-selected-disabled: var(--color-white);
+  --border-color-focus: var(--color-black-90);
+  --border-color-selected: var(--color-bus);
+  --border-color-selected-hover: var(--color-bus-dark);
+  --border-color-selected-disabled: var(--color-black-20);
+  --border-color-unselected: var(--color-black-50);
+  --border-color-unselected-hover: var(--color-black-90);
+  --border-color-unselected-disabled: var(--color-black-10);
+  --icon-color-selected: var(--color-bus);
+  --icon-color-unselected: transparent;
+  --icon-color-hover: var(--color-bus-dark);
+  --icon-color-disabled: var(--color-black-10);
+  --label-color: var(--color-black-90);
+  --label-color-disabled: var(--color-black-40);
+  display: flex;
+  flex-wrap: wrap;
+  min-height: var(--size);
+  position: relative;
+}
+
+.hds-radio-button,
+.hds-radio-button *,
+.hds-radio-button *:before,
+.hds-radio-button *:after {
+  box-sizing: border-box;
+}
+
+.hds-radio-button:not(:first-of-type) {
+  margin-top: var(--spacing-2-xs);
+}
+
+.hds-radio-button .hds-radio-button__label:before,
+.hds-radio-button .hds-radio-button__label:after {
+  border-radius: 50%;
+  content: "";
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+/* inner circle */
+
+.hds-radio-button .hds-radio-button__label:after {
+  background-clip: content-box;
+  background-color: var(--icon-color-unselected);
+  border: var(--border-width) solid var(--border-color-unselected);
+  height: var(--size);
+  padding: calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale)));
+  width: var(--size);
+}
+
+/* inner circle - selected */
+
+.hds-radio-button .hds-radio-button__input:checked + .hds-radio-button__label:after {
+  background-color: var(--icon-color-selected);
+  border-color: var(--border-color-selected);
+}
+
+/* radio button transitions */
+
+.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:after,
+.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:after {
+  transition: 85ms ease-out;
+  transition-property: background-color, border-color;
+}
+
+/* inner circle - disabled */
+
+.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label:after {
+  border-color: var(--border-color-unselected-disabled);
+}
+
+/* inner circle - selected - disabled */
+
+.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label:after {
+  background-color: var(--icon-color-disabled);
+  border-color: var(--border-color-selected-disabled);
+}
+
+/* inner circle - focus */
+
+.hds-radio-button .hds-radio-button__input:not(:disabled):focus + .hds-radio-button__label:after {
+  border-color: var(--border-color-focus);
+}
+
+/* inner circle - unselected - hover */
+
+.hds-radio-button .hds-radio-button__input:not(:disabled):hover + .hds-radio-button__label:after,
+.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus + .hds-radio-button__label:after {
+  border-color: var(--border-color-unselected-hover);
+}
+
+/* background & focus outline */
+
+.hds-radio-button .hds-radio-button__label:before {
+  background-color: var(--background);
+  height: var(--size);
+  width: var(--size);
+}
+
+.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:before,
+.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:before {
+  transition: 85ms ease-out;
+  transition-property: background-color, box-shadow, transform;
+}
+
+/* NATIVE INPUT */
+
+.hds-radio-button .hds-radio-button__input {
+  /*
+  * Normalize.css rules
+  * 1. Change the font styles in all browsers.
+  */
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  height: var(--size);
+  left: 0;
+  /*
+  * Normalize.css rules
+  * 1. Change the font styles in all browsers.
+  * 2. Remove the margin in Firefox and Safari.
+  */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  width: var(--size);
+}
+
+/* LABEL */
+
+.hds-radio-button .hds-radio-button__label {
+  color: var(--label-color);
+  cursor: pointer;
+  font-size: var(--label-font-size);
+  line-height: var(--lineheight-m);
+  padding-left: calc(var(--size) + var(--label-padding));
+  padding-top: calc((var(--size) - var(--label-font-size) * var(--lineheight-m)) / 2);
+  position: relative;
+}
+
+/* CUSTOM RADIO BUTTON */
+
+/* background - hover */
+
+.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:before {
+  background-color: var(--background-hover);
+}
+
+/* background - focus */
+
+.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:before {
+  box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);
+  transform: translate3d(0, 0, 0);
+}
+
+/* inner circle - selected - hover */
+
+.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover + .hds-radio-button__label:after,
+.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus + .hds-radio-button__label:after {
+  background-color: var(--icon-color-hover);
+  border-color: var(--border-color-selected-hover);
+}
+
+/* DISABLED */
+
+/* label */
+
+.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label {
+  color: var(--label-color-disabled);
+}
+
+/* background */
+
+.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label:before {
+  background-color: var(--background-unselected-disabled);
+}
+
+/* background - selected */
+
+.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label:before {
+  background-color: var(--background-selected-disabled);
+}
+
+.hds-radio-button .hds-radio-button__input:disabled,
+.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label {
+  cursor: not-allowed;
+}

package/lib/components/radio-button/radio-button.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/radio-button/radio-button.css%23sass","../../../src/components/radio-button/radio-button.css"],"names":[],"mappings":"AAAA;EACE,YAAA;EAEA,kEAAA;EACA,iBAAA;EACA,mBAAA;EACA,oBAAA;EACA,yCAAA;EACA,oCAAA;EACA,gCAAA;EACA,sCAAA;EACA,sCAAA;EACA,uDAAA;EACA,kDAAA;EACA,2CAAA;EACA,yCAAA;EACA,oDAAA;EACA,uDAAA;EACA,gDAAA;EACA,sDAAA;EACA,yDAAA;EACA,uCAAA;EACA,oCAAA;EACA,yCAAA;EACA,4CAAA;EACA,oCAAA;EACA,6CAAA;EAEA,aAAA;EACA,eAAA;EACA,uBAAA;EACA,kBAAA;ACDF;;ADIA;;;;EAIE,sBAAA;ACDF;;ADIA;EACE,+BAAA;ACDF;;ADIA;;ECAA,kBAAA;EDGE,WAAA;EACA,OAAA;EACA,kBAAA;EACA,MAAA;ACDF;;ADIA,iBAAA;;AACA;ECDA,4BDEE;ECDF,8CAAA;EDGE,gEAAA;EACA,mBAAA;EACA,oFAAA;EACA,kBAAA;ACDF;;ADIA,4BAAA;;AACA;ECDA,4CDEE;ECDF,0CAAA;AACA;;ADIA,6BAAA;;AACA;;ECAA,yBAAA;EDGE,mDAAA;ACDF;;ADIA,4BAAA;;AACA;ECDA,qDDEE;ACDF;;ADIA,uCAAA;;AACA;ECDA,4CDEE;ECDF,mDAAA;AACA;;ADIA,yBAAA;;AACA;ECDA,uCDEE;ACDF;;ADIA,sCAAA;;AACA;;ECAA,kDAAA;AACA;;ADIA,+BAAA;;AACA;ECDA,mCDEE;ECDF,mBAAA;EDGE,kBAAA;ACDF;;ADIA;;ECAA,yBAAA;EDGE,4DAAA;ACDF;;ADIA,iBAAA;;AACA;EACE;;;GAAA;EAIA,oBAAA,EAAA,MAAA;EACA,eAAA,EAAA,MAAA;EACA,mBAAA;EACA,OAAA;EAEA;;;;GAAA;EAKA,iBAAA,EAAA,MAAA;EACA,SAAA,EAAA,MAAA;EACA,UAAA;EACA,kBAAA;EACA,MAAA;EACA,kBAAA;ACFF;;ADKA,UAAA;;AAEA;EACE,yBAAA;ECHF,eDIE;EACA,iCAAA;ECHF,gCAAA;EDKE,sDAAA;EACA,mFAAA;EACA,kBAAA;ACHF;;ADMA,wBAAA;;AAEA,uBAAA;;AACA;EACE,yCAAA;ACJF;;ADOA,uBAAA;;AACA;EACE,iEAAA;ECJF,+BAAA;AACA;;ADOA,oCAAA;;AACA;;ECHA,yCAAA;EDME,gDAAA;ACJF;;ADOA,aAAA;;AAEA,UAAA;;AACA;ECLA,kCAAA;AACA;;ADQA,eAAA;;AACA;ECLA,uDAAA;AACA;;ADQA,0BAAA;;AACA;ECLA,qDAAA;AACA;;ADQA;;ECJA,mBAAA;AACA","file":"radio-button.css","sourcesContent":[".hds-radio-button {\n  --size: 24px;\n\n  /* icon (circle) size relative to the radio button size (--size) */\n  --icon-scale: 0.5;\n  --border-width: 2px;\n  --outline-width: 3px;\n  --label-font-size: var(--fontsize-body-m);\n  --label-padding: var(--spacing-2-xs);\n  --background: var(--color-white);\n  --background-hover: var(--color-white);\n  --background-focus: var(--color-white);\n  --background-unselected-disabled: var(--color-black-10);\n  --background-selected-disabled: var(--color-white);\n  --border-color-focus: var(--color-black-90);\n  --border-color-selected: var(--color-bus);\n  --border-color-selected-hover: var(--color-bus-dark);\n  --border-color-selected-disabled: var(--color-black-20);\n  --border-color-unselected: var(--color-black-50);\n  --border-color-unselected-hover: var(--color-black-90);\n  --border-color-unselected-disabled: var(--color-black-10);\n  --icon-color-selected: var(--color-bus);\n  --icon-color-unselected: transparent;\n  --icon-color-hover: var(--color-bus-dark);\n  --icon-color-disabled: var(--color-black-10);\n  --label-color: var(--color-black-90);\n  --label-color-disabled: var(--color-black-40);\n\n  display: flex;\n  flex-wrap: wrap;\n  min-height: var(--size);\n  position: relative;\n}\n\n.hds-radio-button,\n.hds-radio-button *,\n.hds-radio-button *:before,\n.hds-radio-button *:after {\n  box-sizing: border-box;\n}\n\n.hds-radio-button:not(:first-of-type) {\n  margin-top: var(--spacing-2-xs);\n}\n\n.hds-radio-button .hds-radio-button__label:before,\n.hds-radio-button .hds-radio-button__label:after {\n  border-radius: 50%;\n  content: \"\";\n  left: 0;\n  position: absolute;\n  top: 0;\n}\n\n/* inner circle */\n.hds-radio-button .hds-radio-button__label:after {\n  background-clip: content-box;\n  background-color: var(--icon-color-unselected);\n  border: var(--border-width) solid var(--border-color-unselected);\n  height: var(--size);\n  padding: calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale)));\n  width: var(--size);\n}\n\n/* inner circle - selected */\n.hds-radio-button .hds-radio-button__input:checked + .hds-radio-button__label:after {\n  background-color: var(--icon-color-selected);\n  border-color: var(--border-color-selected);\n}\n\n/* radio button transitions */\n.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:after,\n.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:after {\n  transition: 85ms ease-out;\n  transition-property: background-color, border-color;\n}\n\n/* inner circle - disabled */\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label:after {\n  border-color: var(--border-color-unselected-disabled);\n}\n\n/* inner circle - selected - disabled */\n.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label:after {\n  background-color: var(--icon-color-disabled);\n  border-color: var(--border-color-selected-disabled);\n}\n\n/* inner circle - focus */\n.hds-radio-button .hds-radio-button__input:not(:disabled):focus + .hds-radio-button__label:after {\n  border-color: var(--border-color-focus);\n}\n\n/* inner circle - unselected - hover */\n.hds-radio-button .hds-radio-button__input:not(:disabled):hover + .hds-radio-button__label:after,\n.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus + .hds-radio-button__label:after {\n  border-color: var(--border-color-unselected-hover);\n}\n\n/* background & focus outline */\n.hds-radio-button .hds-radio-button__label:before {\n  background-color: var(--background);\n  height: var(--size);\n  width: var(--size);\n}\n\n.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:before,\n.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:before {\n  transition: 85ms ease-out;\n  transition-property: background-color, box-shadow, transform;\n}\n\n/* NATIVE INPUT */\n.hds-radio-button .hds-radio-button__input {\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  */\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  height: var(--size);\n  left: 0;\n\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  * 2. Remove the margin in Firefox and Safari.\n  */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  width: var(--size);\n}\n\n/* LABEL */\n\n.hds-radio-button .hds-radio-button__label {\n  color: var(--label-color);\n  cursor: pointer;\n  font-size: var(--label-font-size);\n  line-height: var(--lineheight-m);\n  padding-left: calc(var(--size) + var(--label-padding));\n  padding-top: calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);\n  position: relative;\n}\n\n/* CUSTOM RADIO BUTTON */\n\n/* background - hover */\n.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:before {\n  background-color: var(--background-hover);\n}\n\n/* background - focus */\n.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:before {\n  box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);\n  transform: translate3d(0, 0, 0);\n}\n\n/* inner circle - selected - hover */\n.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover + .hds-radio-button__label:after,\n.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus + .hds-radio-button__label:after {\n  background-color: var(--icon-color-hover);\n  border-color: var(--border-color-selected-hover);\n}\n\n/* DISABLED */\n\n/* label */\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label {\n  color: var(--label-color-disabled);\n}\n\n/* background */\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label:before {\n  background-color: var(--background-unselected-disabled);\n}\n\n/* background - selected */\n.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label:before {\n  background-color: var(--background-selected-disabled);\n}\n\n.hds-radio-button .hds-radio-button__input:disabled,\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label {\n  cursor: not-allowed;\n}\n",".hds-radio-button {\n  --size: 24px;\n\n  /* icon (circle) size relative to the radio button size (--size) */\n  --icon-scale: 0.5;\n  --border-width: 2px;\n  --outline-width: 3px;\n  --label-font-size: var(--fontsize-body-m);\n  --label-padding: var(--spacing-2-xs);\n  --background: var(--color-white);\n  --background-hover: var(--color-white);\n  --background-focus: var(--color-white);\n  --background-unselected-disabled: var(--color-black-10);\n  --background-selected-disabled: var(--color-white);\n  --border-color-focus: var(--color-black-90);\n  --border-color-selected: var(--color-bus);\n  --border-color-selected-hover: var(--color-bus-dark);\n  --border-color-selected-disabled: var(--color-black-20);\n  --border-color-unselected: var(--color-black-50);\n  --border-color-unselected-hover: var(--color-black-90);\n  --border-color-unselected-disabled: var(--color-black-10);\n  --icon-color-selected: var(--color-bus);\n  --icon-color-unselected: transparent;\n  --icon-color-hover: var(--color-bus-dark);\n  --icon-color-disabled: var(--color-black-10);\n  --label-color: var(--color-black-90);\n  --label-color-disabled: var(--color-black-40);\n\n  display: flex;\n  flex-wrap: wrap;\n  min-height: var(--size);\n  position: relative;\n}\n\n.hds-radio-button,\n.hds-radio-button *,\n.hds-radio-button *:before,\n.hds-radio-button *:after {\n  box-sizing: border-box;\n}\n\n.hds-radio-button:not(:first-of-type) {\n  margin-top: var(--spacing-2-xs);\n}\n\n.hds-radio-button .hds-radio-button__label:before,\n.hds-radio-button .hds-radio-button__label:after {\n  border-radius: 50%;\n  content: \"\";\n  left: 0;\n  position: absolute;\n  top: 0;\n}\n\n/* inner circle */\n.hds-radio-button .hds-radio-button__label:after {\n  background-clip: content-box;\n  background-color: var(--icon-color-unselected);\n  border: var(--border-width) solid var(--border-color-unselected);\n  height: var(--size);\n  padding: calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale)));\n  width: var(--size);\n}\n\n/* inner circle - selected */\n.hds-radio-button .hds-radio-button__input:checked + .hds-radio-button__label:after {\n  background-color: var(--icon-color-selected);\n  border-color: var(--border-color-selected);\n}\n\n/* radio button transitions */\n.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:after,\n.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:after {\n  transition: 85ms ease-out;\n  transition-property: background-color, border-color;\n}\n\n/* inner circle - disabled */\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label:after {\n  border-color: var(--border-color-unselected-disabled);\n}\n\n/* inner circle - selected - disabled */\n.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label:after {\n  background-color: var(--icon-color-disabled);\n  border-color: var(--border-color-selected-disabled);\n}\n\n/* inner circle - focus */\n.hds-radio-button .hds-radio-button__input:not(:disabled):focus + .hds-radio-button__label:after {\n  border-color: var(--border-color-focus);\n}\n\n/* inner circle - unselected - hover */\n.hds-radio-button .hds-radio-button__input:not(:disabled):hover + .hds-radio-button__label:after,\n.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus + .hds-radio-button__label:after {\n  border-color: var(--border-color-unselected-hover);\n}\n\n/* background & focus outline */\n.hds-radio-button .hds-radio-button__label:before {\n  background-color: var(--background);\n  height: var(--size);\n  width: var(--size);\n}\n\n.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:before,\n.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:before {\n  transition: 85ms ease-out;\n  transition-property: background-color, box-shadow, transform;\n}\n\n/* NATIVE INPUT */\n.hds-radio-button .hds-radio-button__input {\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  */\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  height: var(--size);\n  left: 0;\n\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  * 2. Remove the margin in Firefox and Safari.\n  */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  width: var(--size);\n}\n\n/* LABEL */\n\n.hds-radio-button .hds-radio-button__label {\n  color: var(--label-color);\n  cursor: pointer;\n  font-size: var(--label-font-size);\n  line-height: var(--lineheight-m);\n  padding-left: calc(var(--size) + var(--label-padding));\n  padding-top: calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);\n  position: relative;\n}\n\n/* CUSTOM RADIO BUTTON */\n\n/* background - hover */\n.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:before {\n  background-color: var(--background-hover);\n}\n\n/* background - focus */\n.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:before {\n  box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);\n  transform: translate3d(0, 0, 0);\n}\n\n/* inner circle - selected - hover */\n.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover + .hds-radio-button__label:after,\n.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus + .hds-radio-button__label:after {\n  background-color: var(--icon-color-hover);\n  border-color: var(--border-color-selected-hover);\n}\n\n/* DISABLED */\n\n/* label */\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label {\n  color: var(--label-color-disabled);\n}\n\n/* background */\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label:before {\n  background-color: var(--background-unselected-disabled);\n}\n\n/* background - selected */\n.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label:before {\n  background-color: var(--background-selected-disabled);\n}\n\n.hds-radio-button .hds-radio-button__input:disabled,\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label {\n  cursor: not-allowed;\n}\n"]}

package/lib/components/radio-button/radio-button.min.css

@@ -0,0 +1 @@
+.hds-radio-button{--size:24px;--icon-scale:0.5;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background:var(--color-white);--background-hover:var(--color-white);--background-focus:var(--color-white);--background-unselected-disabled:var(--color-black-10);--background-selected-disabled:var(--color-white);--border-color-focus:var(--color-black-90);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-disabled:var(--color-black-20);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-disabled:var(--color-black-10);--icon-color-selected:var(--color-bus);--icon-color-unselected:transparent;--icon-color-hover:var(--color-bus-dark);--icon-color-disabled:var(--color-black-10);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.hds-radio-button,.hds-radio-button *,.hds-radio-button :after,.hds-radio-button :before{box-sizing:border-box}.hds-radio-button:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-radio-button .hds-radio-button__label:after,.hds-radio-button .hds-radio-button__label:before{border-radius:50%;content:"";left:0;position:absolute;top:0}.hds-radio-button .hds-radio-button__label:after{background-clip:content-box;background-color:var(--icon-color-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);padding:calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale)));width:var(--size)}.hds-radio-button .hds-radio-button__input:checked+.hds-radio-button__label:after{background-color:var(--icon-color-selected);border-color:var(--border-color-selected)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:after{transition:85ms ease-out;transition-property:background-color,border-color}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label:after{border-color:var(--border-color-unselected-disabled)}.hds-radio-button .hds-radio-button__input:checked:disabled+.hds-radio-button__label:after{background-color:var(--icon-color-disabled);border-color:var(--border-color-selected-disabled)}.hds-radio-button .hds-radio-button__input:not(:disabled):focus+.hds-radio-button__label:after{border-color:var(--border-color-focus)}.hds-radio-button .hds-radio-button__input:not(:disabled):hover+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus+.hds-radio-button__label:after{border-color:var(--border-color-unselected-hover)}.hds-radio-button .hds-radio-button__label:before{background-color:var(--background);height:var(--size);width:var(--size)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:before,.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:before{transition:85ms ease-out;transition-property:background-color,box-shadow,transform}.hds-radio-button .hds-radio-button__input{font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;opacity:0;position:absolute;top:0;width:var(--size)}.hds-radio-button .hds-radio-button__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - var(--label-font-size) * var(--lineheight-m)) / 2);position:relative}.hds-radio-button .hds-radio-button__input:hover+.hds-radio-button__label:before{background-color:var(--background-hover)}.hds-radio-button .hds-radio-button__input:focus+.hds-radio-button__label:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0)}.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover+.hds-radio-button__label:after,.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus+.hds-radio-button__label:after{background-color:var(--icon-color-hover);border-color:var(--border-color-selected-hover)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label{color:var(--label-color-disabled)}.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label:before{background-color:var(--background-unselected-disabled)}.hds-radio-button .hds-radio-button__input:checked:disabled+.hds-radio-button__label:before{background-color:var(--background-selected-disabled)}.hds-radio-button .hds-radio-button__input:disabled,.hds-radio-button .hds-radio-button__input:disabled+.hds-radio-button__label{cursor:not-allowed}

package/lib/components/radio-button/radio-button.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/radio-button/radio-button.css%23sass","../../../src/components/radio-button/radio-button.css"],"names":[],"mappings":"AAAA,kBACE,WAAA,CAGA,gBAAA,CACA,kBAAA,CACA,mBAAA,CACA,wCAAA,CACA,mCAAA,CACA,+BAAA,CACA,qCAAA,CACA,qCAAA,CACA,sDAAA,CACA,iDAAA,CACA,0CAAA,CACA,wCAAA,CACA,mDAAA,CACA,sDAAA,CACA,+CAAA,CACA,qDAAA,CACA,wDAAA,CACA,sCAAA,CACA,mCAAA,CACA,wCAAA,CACA,2CAAA,CACA,mCAAA,CACA,4CAAA,CAEA,YAAA,CACA,cAAA,CACA,sBAAA,CACA,iBCDF,CDIA,yFAIE,qBCDF,CDIA,sCACE,8BCDF,CDIA,mGCAA,iBAAA,CDGE,UAAA,CACA,MAAA,CACA,iBAAA,CACA,KCDF,CDKA,iDCDA,2BDEE,CCDF,6CAAA,CDGE,+DAAA,CACA,kBAAA,CACA,mFAAA,CACA,iBCDF,CDKA,kFCDA,2CDEE,CCDF,yCACA,CDKA,gKCAA,wBAAA,CDGE,iDCDF,CDKA,mFCDA,oDACA,CDKA,2FCDA,2CDEE,CCDF,kDACA,CDKA,+FCDA,sCACA,CDKA,oMCAA,iDACA,CDKA,kDCDA,kCDEE,CCDF,kBAAA,CDGE,iBCDF,CDIA,kKCAA,wBAAA,CDGE,yDCDF,CDKA,2CAKE,mBAAA,CACA,cAAA,CACA,kBAAA,CACA,MAAA,CAOA,gBAAA,CACA,QAAA,CACA,SAAA,CACA,iBAAA,CACA,KAAA,CACA,iBCFF,CDOA,2CACE,wBAAA,CCHF,cDIE,CACA,gCAAA,CCHF,+BAAA,CDKE,qDAAA,CACA,kFAAA,CACA,iBCHF,CDSA,iFACE,wCCJF,CDQA,iFACE,gEAAA,CCJF,uBACA,CDQA,oNCHA,wCAAA,CDME,+CCJF,CDUA,6ECLA,iCACA,CDSA,oFCLA,sDACA,CDSA,4FCLA,oDACA,CDQA,iICJA,kBACA","file":"radio-button.min.css","sourcesContent":[".hds-radio-button {\n  --size: 24px;\n\n  /* icon (circle) size relative to the radio button size (--size) */\n  --icon-scale: 0.5;\n  --border-width: 2px;\n  --outline-width: 3px;\n  --label-font-size: var(--fontsize-body-m);\n  --label-padding: var(--spacing-2-xs);\n  --background: var(--color-white);\n  --background-hover: var(--color-white);\n  --background-focus: var(--color-white);\n  --background-unselected-disabled: var(--color-black-10);\n  --background-selected-disabled: var(--color-white);\n  --border-color-focus: var(--color-black-90);\n  --border-color-selected: var(--color-bus);\n  --border-color-selected-hover: var(--color-bus-dark);\n  --border-color-selected-disabled: var(--color-black-20);\n  --border-color-unselected: var(--color-black-50);\n  --border-color-unselected-hover: var(--color-black-90);\n  --border-color-unselected-disabled: var(--color-black-10);\n  --icon-color-selected: var(--color-bus);\n  --icon-color-unselected: transparent;\n  --icon-color-hover: var(--color-bus-dark);\n  --icon-color-disabled: var(--color-black-10);\n  --label-color: var(--color-black-90);\n  --label-color-disabled: var(--color-black-40);\n\n  display: flex;\n  flex-wrap: wrap;\n  min-height: var(--size);\n  position: relative;\n}\n\n.hds-radio-button,\n.hds-radio-button *,\n.hds-radio-button *:before,\n.hds-radio-button *:after {\n  box-sizing: border-box;\n}\n\n.hds-radio-button:not(:first-of-type) {\n  margin-top: var(--spacing-2-xs);\n}\n\n.hds-radio-button .hds-radio-button__label:before,\n.hds-radio-button .hds-radio-button__label:after {\n  border-radius: 50%;\n  content: \"\";\n  left: 0;\n  position: absolute;\n  top: 0;\n}\n\n/* inner circle */\n.hds-radio-button .hds-radio-button__label:after {\n  background-clip: content-box;\n  background-color: var(--icon-color-unselected);\n  border: var(--border-width) solid var(--border-color-unselected);\n  height: var(--size);\n  padding: calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale)));\n  width: var(--size);\n}\n\n/* inner circle - selected */\n.hds-radio-button .hds-radio-button__input:checked + .hds-radio-button__label:after {\n  background-color: var(--icon-color-selected);\n  border-color: var(--border-color-selected);\n}\n\n/* radio button transitions */\n.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:after,\n.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:after {\n  transition: 85ms ease-out;\n  transition-property: background-color, border-color;\n}\n\n/* inner circle - disabled */\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label:after {\n  border-color: var(--border-color-unselected-disabled);\n}\n\n/* inner circle - selected - disabled */\n.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label:after {\n  background-color: var(--icon-color-disabled);\n  border-color: var(--border-color-selected-disabled);\n}\n\n/* inner circle - focus */\n.hds-radio-button .hds-radio-button__input:not(:disabled):focus + .hds-radio-button__label:after {\n  border-color: var(--border-color-focus);\n}\n\n/* inner circle - unselected - hover */\n.hds-radio-button .hds-radio-button__input:not(:disabled):hover + .hds-radio-button__label:after,\n.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus + .hds-radio-button__label:after {\n  border-color: var(--border-color-unselected-hover);\n}\n\n/* background & focus outline */\n.hds-radio-button .hds-radio-button__label:before {\n  background-color: var(--background);\n  height: var(--size);\n  width: var(--size);\n}\n\n.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:before,\n.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:before {\n  transition: 85ms ease-out;\n  transition-property: background-color, box-shadow, transform;\n}\n\n/* NATIVE INPUT */\n.hds-radio-button .hds-radio-button__input {\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  */\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  height: var(--size);\n  left: 0;\n\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  * 2. Remove the margin in Firefox and Safari.\n  */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  width: var(--size);\n}\n\n/* LABEL */\n\n.hds-radio-button .hds-radio-button__label {\n  color: var(--label-color);\n  cursor: pointer;\n  font-size: var(--label-font-size);\n  line-height: var(--lineheight-m);\n  padding-left: calc(var(--size) + var(--label-padding));\n  padding-top: calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);\n  position: relative;\n}\n\n/* CUSTOM RADIO BUTTON */\n\n/* background - hover */\n.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:before {\n  background-color: var(--background-hover);\n}\n\n/* background - focus */\n.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:before {\n  box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);\n  transform: translate3d(0, 0, 0);\n}\n\n/* inner circle - selected - hover */\n.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover + .hds-radio-button__label:after,\n.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus + .hds-radio-button__label:after {\n  background-color: var(--icon-color-hover);\n  border-color: var(--border-color-selected-hover);\n}\n\n/* DISABLED */\n\n/* label */\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label {\n  color: var(--label-color-disabled);\n}\n\n/* background */\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label:before {\n  background-color: var(--background-unselected-disabled);\n}\n\n/* background - selected */\n.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label:before {\n  background-color: var(--background-selected-disabled);\n}\n\n.hds-radio-button .hds-radio-button__input:disabled,\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label {\n  cursor: not-allowed;\n}\n",".hds-radio-button {\n  --size: 24px;\n\n  /* icon (circle) size relative to the radio button size (--size) */\n  --icon-scale: 0.5;\n  --border-width: 2px;\n  --outline-width: 3px;\n  --label-font-size: var(--fontsize-body-m);\n  --label-padding: var(--spacing-2-xs);\n  --background: var(--color-white);\n  --background-hover: var(--color-white);\n  --background-focus: var(--color-white);\n  --background-unselected-disabled: var(--color-black-10);\n  --background-selected-disabled: var(--color-white);\n  --border-color-focus: var(--color-black-90);\n  --border-color-selected: var(--color-bus);\n  --border-color-selected-hover: var(--color-bus-dark);\n  --border-color-selected-disabled: var(--color-black-20);\n  --border-color-unselected: var(--color-black-50);\n  --border-color-unselected-hover: var(--color-black-90);\n  --border-color-unselected-disabled: var(--color-black-10);\n  --icon-color-selected: var(--color-bus);\n  --icon-color-unselected: transparent;\n  --icon-color-hover: var(--color-bus-dark);\n  --icon-color-disabled: var(--color-black-10);\n  --label-color: var(--color-black-90);\n  --label-color-disabled: var(--color-black-40);\n\n  display: flex;\n  flex-wrap: wrap;\n  min-height: var(--size);\n  position: relative;\n}\n\n.hds-radio-button,\n.hds-radio-button *,\n.hds-radio-button *:before,\n.hds-radio-button *:after {\n  box-sizing: border-box;\n}\n\n.hds-radio-button:not(:first-of-type) {\n  margin-top: var(--spacing-2-xs);\n}\n\n.hds-radio-button .hds-radio-button__label:before,\n.hds-radio-button .hds-radio-button__label:after {\n  border-radius: 50%;\n  content: \"\";\n  left: 0;\n  position: absolute;\n  top: 0;\n}\n\n/* inner circle */\n.hds-radio-button .hds-radio-button__label:after {\n  background-clip: content-box;\n  background-color: var(--icon-color-unselected);\n  border: var(--border-width) solid var(--border-color-unselected);\n  height: var(--size);\n  padding: calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale)));\n  width: var(--size);\n}\n\n/* inner circle - selected */\n.hds-radio-button .hds-radio-button__input:checked + .hds-radio-button__label:after {\n  background-color: var(--icon-color-selected);\n  border-color: var(--border-color-selected);\n}\n\n/* radio button transitions */\n.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:after,\n.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:after {\n  transition: 85ms ease-out;\n  transition-property: background-color, border-color;\n}\n\n/* inner circle - disabled */\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label:after {\n  border-color: var(--border-color-unselected-disabled);\n}\n\n/* inner circle - selected - disabled */\n.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label:after {\n  background-color: var(--icon-color-disabled);\n  border-color: var(--border-color-selected-disabled);\n}\n\n/* inner circle - focus */\n.hds-radio-button .hds-radio-button__input:not(:disabled):focus + .hds-radio-button__label:after {\n  border-color: var(--border-color-focus);\n}\n\n/* inner circle - unselected - hover */\n.hds-radio-button .hds-radio-button__input:not(:disabled):hover + .hds-radio-button__label:after,\n.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus + .hds-radio-button__label:after {\n  border-color: var(--border-color-unselected-hover);\n}\n\n/* background & focus outline */\n.hds-radio-button .hds-radio-button__label:before {\n  background-color: var(--background);\n  height: var(--size);\n  width: var(--size);\n}\n\n.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:before,\n.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:before {\n  transition: 85ms ease-out;\n  transition-property: background-color, box-shadow, transform;\n}\n\n/* NATIVE INPUT */\n.hds-radio-button .hds-radio-button__input {\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  */\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  height: var(--size);\n  left: 0;\n\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  * 2. Remove the margin in Firefox and Safari.\n  */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  width: var(--size);\n}\n\n/* LABEL */\n\n.hds-radio-button .hds-radio-button__label {\n  color: var(--label-color);\n  cursor: pointer;\n  font-size: var(--label-font-size);\n  line-height: var(--lineheight-m);\n  padding-left: calc(var(--size) + var(--label-padding));\n  padding-top: calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);\n  position: relative;\n}\n\n/* CUSTOM RADIO BUTTON */\n\n/* background - hover */\n.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:before {\n  background-color: var(--background-hover);\n}\n\n/* background - focus */\n.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:before {\n  box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);\n  transform: translate3d(0, 0, 0);\n}\n\n/* inner circle - selected - hover */\n.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover + .hds-radio-button__label:after,\n.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus + .hds-radio-button__label:after {\n  background-color: var(--icon-color-hover);\n  border-color: var(--border-color-selected-hover);\n}\n\n/* DISABLED */\n\n/* label */\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label {\n  color: var(--label-color-disabled);\n}\n\n/* background */\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label:before {\n  background-color: var(--background-unselected-disabled);\n}\n\n/* background - selected */\n.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label:before {\n  background-color: var(--background-selected-disabled);\n}\n\n.hds-radio-button .hds-radio-button__input:disabled,\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label {\n  cursor: not-allowed;\n}\n"]}

package/lib/components/search-input/search-input.css

@@ -0,0 +1,182 @@
+.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--search {
+  --mask-image-search: 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='M15 1C19.4183 1 23 4.58172 23 9C23 13.4183 19.4183 17 15 17C13.2001 17 11.539 16.4056 10.2023 15.4023L3.80101 21.8021L2.21002 20.2111L8.60822 13.8117C7.59861 12.4726 7.00002 10.8062 7.00002 9C7.00002 4.58172 10.5817 1 15 1ZM15 3C11.6863 3 9.00002 5.68629 9.00002 9C9.00002 12.3137 11.6863 15 15 15C18.3137 15 21 12.3137 21 9C21 5.68629 18.3137 3 15 3Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  --mask-image: var(--mask-image-search);
+}
+
+.hds-icon-start--search {
+  --mask-image-before: var(--mask-image-search);
+}
+
+.hds-icon-end--search {
+  --mask-image-after: var(--mask-image-search);
+}
+
+.hds-search-input {
+  --border-width: 2px;
+  --outline-width: 3px;
+  --input-height: 56px;
+  --helper-color-default: var(--color-black-60);
+  --input-background-default: var(--color-white);
+  --input-border-color-default: var(--color-black-50);
+  --input-border-color-hover: var(--color-black-90);
+  --input-border-color-focus: var(--color-black-90);
+  --input-color-default: var(--color-black-90);
+  --label-color-default: var(--color-black-90);
+}
+
+/* LABEL */
+
+.hds-search-input__label {
+  color: var(--label-color-default);
+  display: block;
+  font-size: var(--fontsize-body-m);
+  font-weight: 500;
+  margin-bottom: var(--spacing-3-xs);
+}
+
+/* INPUT */
+
+.hds-search-input__input-wrapper {
+  display: flex;
+  height: 100%;
+  position: relative;
+}
+
+.hds-search-input .hds-search-input__input {
+  -webkit-appearance: none;
+  background-color: var(--input-background-default);
+  border: var(--border-width) solid var(--input-border-color-default);
+  box-sizing: border-box;
+  color: var(--input-color-default);
+  font-size: 1.125em;
+  height: var(--input-height);
+  line-height: normal;
+  padding: 0 var(--spacing-s);
+  width: 100%;
+}
+
+.hds-search-input .hds-search-input__input:hover {
+  border-color: var(--input-border-color-hover);
+  transition: border-color 85ms ease-out;
+}
+
+.hds-search-input .hds-search-input__input:focus {
+  border-color: var(--input-border-color-focus);
+  outline: none;
+}
+
+/* FOCUS OUTLINE */
+
+.hds-search-input .hds-search-input__input:not([readonly]):focus {
+  outline: var(--outline-width) solid var(--color-focus-outline);
+  transform: translate3d(0, 0, 0);
+}
+
+/* BUTTON */
+
+.hds-search-input__buttons {
+  align-items: center;
+  bottom: 0;
+  display: flex;
+  font-size: 1rem;
+  justify-content: center;
+  margin-right: calc(var(--spacing-s) - var(--spacing-xs) / 2);
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.hds-search-input__button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  border: none;
+  color: inherit;
+  color: var(--dropdown-color-default);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  outline: none;
+  padding: var(--spacing-xs) calc(var(--spacing-xs) / 2);
+}
+
+.hds-search-input__buttons .hds-search-input__button:focus {
+  outline: var(--outline-width) solid var(--color-focus-outline);
+}
+
+/* HELPER TEXT */
+
+.hds-search-input__helper-text {
+  color: var(--helper-color-default);
+  display: block;
+  font-size: var(--fontsize-body-m);
+  margin-top: var(--spacing-3-xs);
+}

package/lib/components/search-input/search-input.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/icons/icon.css","../../../src/components/search-input/search-input.css","../../../src/icons/search.css","../../../src/components/search-input/search-input.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;ECCA,uCDAE;ACCF;;ADEA;EACE,qCAAA;ACCF;;ADEA;EACE,oCAAA;ACCF;;ADEA;EACE,oCAAA;ACCF;;ADEA;ECCA,oCAAA;AACA;;ADEA;EACE,8BAAA;EACA,WAAA;EACA,oBAAA;EACA,8BAAA;EACA,4CAAA;EACA,oCAAA;EACA,6BAAA;UAAA,qBAAA;ECCF,8BAAA;UAAA,sBAAA;EDCE,0BAAA;UAAA,kBAAA;ECCF,6BAAA;AACA;;ADEA;EACE,8BAAA;ECCF,WAAA;EDCE,oBAAA;EACA,8BAAA;ECCF,2CAAA;EDCE,mCAAA;ECCF,6BDAE;UCAF,qBDAE;ECCF,8BAAA;UAAA,sBAAA;EDCE,0BAAA;UAAA,kBAAA;EACA,6BAAA;ACCF;;AC3DA;ED8DA,ykBC7DE;ED8DF,sCAAA;AACA;;AC3DA;EACE,6CAAA;AD8DF;;AC3DA;EACE,4CAAA;AD8DF;;AErEA;EFwEA,mBAAA;EEtEE,oBAAA;EACA,oBAAA;EACA,6CAAA;EACA,8CAAA;EACA,mDAAA;EACA,iDAAA;EACA,iDAAA;EACA,4CAAA;EACA,4CAAA;AFwEF;;AErEA,UAAA;;AACA;EACE,iCAAA;EFwEF,cAAA;EEtEE,iCAAA;EFwEF,gBEvEE;EFwEF,kCAAA;AACA;;AErEA,UAAA;;AACA;EFwEA,aAAA;EEtEE,YAAA;EACA,kBAAA;AFwEF;;AErEA;EACE,wBAAA;EACA,iDAAA;EACA,mEAAA;EACA,sBAAA;EACA,iCAAA;EACA,kBAAA;EACA,2BAAA;EACA,mBAAA;EACA,2BAAA;EACA,WAAA;AFwEF;;AErEA;EACE,6CAAA;EACA,sCAAA;AFwEF;;AErEA;EACE,6CAAA;EACA,aAAA;AFwEF;;AErEA,kBAAA;;AACA;EACE,8DAAA;EACA,+BAAA;AFwEF;;AEpEA,WAAA;;AACA;EACE,mBAAA;EACA,SAAA;EACA,aAAA;EACA,eAAA;EACA,uBAAA;EACA,4DAAA;EACA,kBAAA;EACA,QAAA;EACA,MAAA;AFuEF;;AEpEA;EACE,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,gBAAA;EACA,YAAA;EACA,cAAA;EACA,oCAAA;EACA,eAAA;EACA,aAAA;EACA,aAAA;EACA,aAAA;EACA,sDAAA;AFuEF;;AEpEA;EACE,8DAAA;AFuEF;;AEpEA,gBAAA;;AACA;EACE,kCAAA;EACA,cAAA;EACA,iCAAA;EACA,+BAAA;AFuEF","file":"search-input.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/search.css';\n\n.hds-search-input {\n  --border-width: 2px;\n  --outline-width: 3px;\n  --input-height: 56px;\n  --helper-color-default: var(--color-black-60);\n  --input-background-default: var(--color-white);\n  --input-border-color-default: var(--color-black-50);\n  --input-border-color-hover : var(--color-black-90);\n  --input-border-color-focus: var(--color-black-90);\n  --input-color-default: var(--color-black-90);\n  --label-color-default: var(--color-black-90);\n}\n\n/* LABEL */\n.hds-search-input__label {\n  color: var(--label-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  font-weight: 500;\n  margin-bottom: var(--spacing-3-xs);\n}\n\n/* INPUT */\n.hds-search-input__input-wrapper {\n  display: flex;\n  height: 100%;\n  position: relative;\n}\n\n.hds-search-input .hds-search-input__input {\n  -webkit-appearance: none;\n  background-color: var(--input-background-default);\n  border: var(--border-width) solid var(--input-border-color-default);\n  box-sizing: border-box;\n  color: var(--input-color-default);\n  font-size: 1.125em;\n  height: var(--input-height);\n  line-height: normal;\n  padding: 0 var(--spacing-s);\n  width: 100%;\n}\n\n.hds-search-input .hds-search-input__input:hover {\n  border-color: var(--input-border-color-hover);\n  transition: border-color 85ms ease-out;\n}\n\n.hds-search-input .hds-search-input__input:focus {\n  border-color: var(--input-border-color-focus);\n  outline: none;\n}\n\n/* FOCUS OUTLINE */\n.hds-search-input .hds-search-input__input:not([readonly]):focus {\n  outline: var(--outline-width) solid var(--color-focus-outline);\n  transform: translate3d(0, 0, 0);\n}\n\n\n/* BUTTON */\n.hds-search-input__buttons {\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  font-size: 1rem;\n  justify-content: center;\n  margin-right: calc(var(--spacing-s) - var(--spacing-xs) / 2);\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hds-search-input__button {\n  appearance: none;\n  background: none;\n  border: none;\n  color: inherit;\n  color: var(--dropdown-color-default);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  outline: none;\n  padding: var(--spacing-xs) calc(var(--spacing-xs) / 2);\n}\n\n.hds-search-input__buttons .hds-search-input__button:focus {\n  outline: var(--outline-width) solid var(--color-focus-outline);\n}\n\n/* HELPER TEXT */\n.hds-search-input__helper-text {\n  color: var(--helper-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  margin-top: var(--spacing-3-xs);\n}\n",".hds-icon--search {\n  --mask-image-search: 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='M15 1C19.4183 1 23 4.58172 23 9C23 13.4183 19.4183 17 15 17C13.2001 17 11.539 16.4056 10.2023 15.4023L3.80101 21.8021L2.21002 20.2111L8.60822 13.8117C7.59861 12.4726 7.00002 10.8062 7.00002 9C7.00002 4.58172 10.5817 1 15 1ZM15 3C11.6863 3 9.00002 5.68629 9.00002 9C9.00002 12.3137 11.6863 15 15 15C18.3137 15 21 12.3137 21 9C21 5.68629 18.3137 3 15 3Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-search);\n}\n\n.hds-icon-start--search {\n  --mask-image-before: var(--mask-image-search);\n}\n\n.hds-icon-end--search {\n  --mask-image-after: var(--mask-image-search);\n}\n","@use '../../icons/icon.css';\n@use '../../icons/search.css';\n\n.hds-search-input {\n  --border-width: 2px;\n  --outline-width: 3px;\n  --input-height: 56px;\n  --helper-color-default: var(--color-black-60);\n  --input-background-default: var(--color-white);\n  --input-border-color-default: var(--color-black-50);\n  --input-border-color-hover : var(--color-black-90);\n  --input-border-color-focus: var(--color-black-90);\n  --input-color-default: var(--color-black-90);\n  --label-color-default: var(--color-black-90);\n}\n\n/* LABEL */\n.hds-search-input__label {\n  color: var(--label-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  font-weight: 500;\n  margin-bottom: var(--spacing-3-xs);\n}\n\n/* INPUT */\n.hds-search-input__input-wrapper {\n  display: flex;\n  height: 100%;\n  position: relative;\n}\n\n.hds-search-input .hds-search-input__input {\n  -webkit-appearance: none;\n  background-color: var(--input-background-default);\n  border: var(--border-width) solid var(--input-border-color-default);\n  box-sizing: border-box;\n  color: var(--input-color-default);\n  font-size: 1.125em;\n  height: var(--input-height);\n  line-height: normal;\n  padding: 0 var(--spacing-s);\n  width: 100%;\n}\n\n.hds-search-input .hds-search-input__input:hover {\n  border-color: var(--input-border-color-hover);\n  transition: border-color 85ms ease-out;\n}\n\n.hds-search-input .hds-search-input__input:focus {\n  border-color: var(--input-border-color-focus);\n  outline: none;\n}\n\n/* FOCUS OUTLINE */\n.hds-search-input .hds-search-input__input:not([readonly]):focus {\n  outline: var(--outline-width) solid var(--color-focus-outline);\n  transform: translate3d(0, 0, 0);\n}\n\n\n/* BUTTON */\n.hds-search-input__buttons {\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  font-size: 1rem;\n  justify-content: center;\n  margin-right: calc(var(--spacing-s) - var(--spacing-xs) / 2);\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hds-search-input__button {\n  appearance: none;\n  background: none;\n  border: none;\n  color: inherit;\n  color: var(--dropdown-color-default);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  outline: none;\n  padding: var(--spacing-xs) calc(var(--spacing-xs) / 2);\n}\n\n.hds-search-input__buttons .hds-search-input__button:focus {\n  outline: var(--outline-width) solid var(--color-focus-outline);\n}\n\n/* HELPER TEXT */\n.hds-search-input__helper-text {\n  color: var(--helper-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  margin-top: var(--spacing-3-xs);\n}\n"]}

package/lib/components/search-input/search-input.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--search{--mask-image-search: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='M15 1a8 8 0 11-4.798 14.402l-6.401 6.4-1.591-1.59 6.398-6.4A8 8 0 0115 1zm0 2a6 6 0 100 12 6 6 0 000-12z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-search)}.hds-icon-start--search{--mask-image-before:var(--mask-image-search)}.hds-icon-end--search{--mask-image-after:var(--mask-image-search)}.hds-search-input{--border-width:2px;--outline-width:3px;--input-height:56px;--helper-color-default:var(--color-black-60);--input-background-default:var(--color-white);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-color-default:var(--color-black-90);--label-color-default:var(--color-black-90)}.hds-search-input__label{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.hds-search-input__input-wrapper{display:flex;height:100%;position:relative}.hds-search-input .hds-search-input__input{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);box-sizing:border-box;color:var(--input-color-default);font-size:1.125em;height:var(--input-height);line-height:normal;padding:0 var(--spacing-s);width:100%}.hds-search-input .hds-search-input__input:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.hds-search-input .hds-search-input__input:focus{border-color:var(--input-border-color-focus);outline:none}.hds-search-input .hds-search-input__input:not([readonly]):focus{outline:var(--outline-width) solid var(--color-focus-outline);transform:translateZ(0)}.hds-search-input__buttons{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.hds-search-input__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:inherit;color:var(--dropdown-color-default);cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.hds-search-input__buttons .hds-search-input__button:focus{outline:var(--outline-width) solid var(--color-focus-outline)}.hds-search-input__helper-text{color:var(--helper-color-default);display:block;font-size:var(--fontsize-body-m);margin-top:var(--spacing-3-xs)}

package/lib/components/search-input/search-input.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/icons/icon.css","../../../src/components/search-input/search-input.css","../../../src/icons/search.css","../../../src/components/search-input/search-input.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,mBCCA,sCACA,CDEA,kBACE,oCCCF,CDEA,kBACE,mCCCF,CDEA,kBACE,mCCCF,CDEA,mBCCA,mCACA,CDEA,iCAKE,2CAAA,CACA,mCCKF,CDEA,+DAZE,6BAAA,CACA,UAAA,CACA,mBAAA,CACA,4BAAA,CAGA,4BAAA,CAAA,oBAAA,CCCF,6BAAA,CAAA,qBAAA,CDCE,yBAAA,CAAA,iBAAA,CCCF,2BAcA,CDXA,8BCKA,0CAAA,CDCE,kCCKF,CC3DA,kBD8DA,0TC7DE,CD8DF,qCACA,CC3DA,wBACE,4CD8DF,CC3DA,sBACE,2CD8DF,CErEA,kBFwEA,kBAAA,CEtEE,mBAAA,CACA,mBAAA,CACA,4CAAA,CACA,6CAAA,CACA,kDAAA,CACA,gDAAA,CACA,gDAAA,CACA,2CAAA,CACA,2CFwEF,CEpEA,yBACE,gCAAA,CFwEF,aAAA,CEtEE,gCAAA,CFwEF,eEvEE,CFwEF,iCACA,CEpEA,iCFwEA,YAAA,CEtEE,WAAA,CACA,iBFwEF,CErEA,2CACE,uBAAA,CACA,gDAAA,CACA,kEAAA,CACA,qBAAA,CACA,gCAAA,CACA,iBAAA,CACA,0BAAA,CACA,kBAAA,CACA,0BAAA,CACA,UFwEF,CErEA,iDACE,4CAAA,CACA,qCFwEF,CErEA,iDACE,4CAAA,CACA,YFwEF,CEpEA,iEACE,6DAAA,CACA,uBFwEF,CEnEA,2BACE,kBAAA,CACA,QAAA,CACA,YAAA,CACA,cAAA,CACA,sBAAA,CACA,2DAAA,CACA,iBAAA,CACA,OAAA,CACA,KFuEF,CEpEA,0BACE,uBAAA,CAAA,oBAAA,CAAA,eAAA,CACA,eAAA,CACA,WAAA,CACA,aAAA,CACA,mCAAA,CACA,cAAA,CACA,YAAA,CACA,YAAA,CACA,YAAA,CACA,qDFuEF,CEpEA,2DACE,6DFuEF,CEnEA,+BACE,iCAAA,CACA,aAAA,CACA,gCAAA,CACA,8BFuEF","file":"search-input.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/search.css';\n\n.hds-search-input {\n  --border-width: 2px;\n  --outline-width: 3px;\n  --input-height: 56px;\n  --helper-color-default: var(--color-black-60);\n  --input-background-default: var(--color-white);\n  --input-border-color-default: var(--color-black-50);\n  --input-border-color-hover : var(--color-black-90);\n  --input-border-color-focus: var(--color-black-90);\n  --input-color-default: var(--color-black-90);\n  --label-color-default: var(--color-black-90);\n}\n\n/* LABEL */\n.hds-search-input__label {\n  color: var(--label-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  font-weight: 500;\n  margin-bottom: var(--spacing-3-xs);\n}\n\n/* INPUT */\n.hds-search-input__input-wrapper {\n  display: flex;\n  height: 100%;\n  position: relative;\n}\n\n.hds-search-input .hds-search-input__input {\n  -webkit-appearance: none;\n  background-color: var(--input-background-default);\n  border: var(--border-width) solid var(--input-border-color-default);\n  box-sizing: border-box;\n  color: var(--input-color-default);\n  font-size: 1.125em;\n  height: var(--input-height);\n  line-height: normal;\n  padding: 0 var(--spacing-s);\n  width: 100%;\n}\n\n.hds-search-input .hds-search-input__input:hover {\n  border-color: var(--input-border-color-hover);\n  transition: border-color 85ms ease-out;\n}\n\n.hds-search-input .hds-search-input__input:focus {\n  border-color: var(--input-border-color-focus);\n  outline: none;\n}\n\n/* FOCUS OUTLINE */\n.hds-search-input .hds-search-input__input:not([readonly]):focus {\n  outline: var(--outline-width) solid var(--color-focus-outline);\n  transform: translate3d(0, 0, 0);\n}\n\n\n/* BUTTON */\n.hds-search-input__buttons {\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  font-size: 1rem;\n  justify-content: center;\n  margin-right: calc(var(--spacing-s) - var(--spacing-xs) / 2);\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hds-search-input__button {\n  appearance: none;\n  background: none;\n  border: none;\n  color: inherit;\n  color: var(--dropdown-color-default);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  outline: none;\n  padding: var(--spacing-xs) calc(var(--spacing-xs) / 2);\n}\n\n.hds-search-input__buttons .hds-search-input__button:focus {\n  outline: var(--outline-width) solid var(--color-focus-outline);\n}\n\n/* HELPER TEXT */\n.hds-search-input__helper-text {\n  color: var(--helper-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  margin-top: var(--spacing-3-xs);\n}\n",".hds-icon--search {\n  --mask-image-search: 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='M15 1C19.4183 1 23 4.58172 23 9C23 13.4183 19.4183 17 15 17C13.2001 17 11.539 16.4056 10.2023 15.4023L3.80101 21.8021L2.21002 20.2111L8.60822 13.8117C7.59861 12.4726 7.00002 10.8062 7.00002 9C7.00002 4.58172 10.5817 1 15 1ZM15 3C11.6863 3 9.00002 5.68629 9.00002 9C9.00002 12.3137 11.6863 15 15 15C18.3137 15 21 12.3137 21 9C21 5.68629 18.3137 3 15 3Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-search);\n}\n\n.hds-icon-start--search {\n  --mask-image-before: var(--mask-image-search);\n}\n\n.hds-icon-end--search {\n  --mask-image-after: var(--mask-image-search);\n}\n","@use '../../icons/icon.css';\n@use '../../icons/search.css';\n\n.hds-search-input {\n  --border-width: 2px;\n  --outline-width: 3px;\n  --input-height: 56px;\n  --helper-color-default: var(--color-black-60);\n  --input-background-default: var(--color-white);\n  --input-border-color-default: var(--color-black-50);\n  --input-border-color-hover : var(--color-black-90);\n  --input-border-color-focus: var(--color-black-90);\n  --input-color-default: var(--color-black-90);\n  --label-color-default: var(--color-black-90);\n}\n\n/* LABEL */\n.hds-search-input__label {\n  color: var(--label-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  font-weight: 500;\n  margin-bottom: var(--spacing-3-xs);\n}\n\n/* INPUT */\n.hds-search-input__input-wrapper {\n  display: flex;\n  height: 100%;\n  position: relative;\n}\n\n.hds-search-input .hds-search-input__input {\n  -webkit-appearance: none;\n  background-color: var(--input-background-default);\n  border: var(--border-width) solid var(--input-border-color-default);\n  box-sizing: border-box;\n  color: var(--input-color-default);\n  font-size: 1.125em;\n  height: var(--input-height);\n  line-height: normal;\n  padding: 0 var(--spacing-s);\n  width: 100%;\n}\n\n.hds-search-input .hds-search-input__input:hover {\n  border-color: var(--input-border-color-hover);\n  transition: border-color 85ms ease-out;\n}\n\n.hds-search-input .hds-search-input__input:focus {\n  border-color: var(--input-border-color-focus);\n  outline: none;\n}\n\n/* FOCUS OUTLINE */\n.hds-search-input .hds-search-input__input:not([readonly]):focus {\n  outline: var(--outline-width) solid var(--color-focus-outline);\n  transform: translate3d(0, 0, 0);\n}\n\n\n/* BUTTON */\n.hds-search-input__buttons {\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  font-size: 1rem;\n  justify-content: center;\n  margin-right: calc(var(--spacing-s) - var(--spacing-xs) / 2);\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hds-search-input__button {\n  appearance: none;\n  background: none;\n  border: none;\n  color: inherit;\n  color: var(--dropdown-color-default);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  outline: none;\n  padding: var(--spacing-xs) calc(var(--spacing-xs) / 2);\n}\n\n.hds-search-input__buttons .hds-search-input__button:focus {\n  outline: var(--outline-width) solid var(--color-focus-outline);\n}\n\n/* HELPER TEXT */\n.hds-search-input__helper-text {\n  color: var(--helper-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  margin-top: var(--spacing-3-xs);\n}\n"]}

package/lib/components/selection-group/selection-group.css

@@ -0,0 +1,91 @@
+.hds-selection-group {
+  --spacing-col: 1.25rem;
+  --spacing-row: var(--spacing-s);
+  --spacing-legend: var(--spacing-xs);
+  --label-color-default: var(--color-black-90);
+  --icon-size: var(--spacing-m);
+  border: 0;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+}
+
+.hds-selection-group > *:not(.hds-selection-group__items) {
+  float: left;
+}
+
+.hds-selection-group__legend {
+  /*
+  * Normalized rules
+  * 1. Correct the text wrapping in Edge and IE.
+  *    `fieldset` elements in all browsers.
+  */
+  box-sizing: border-box; /* 1 */
+  color: var(--label-color-default);
+  display: block;
+  font-size: var(--fontsize-body-m);
+  font-weight: 500;
+  margin-bottom: var(--spacing-legend);
+  /*
+  * Normalized rules
+  * 1. Correct the text wrapping in Edge and IE.
+  * 2. Remove the padding so developers are not caught out when they zero out
+  *    `fieldset` elements in all browsers.
+  */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 2 */
+  white-space: normal; /* 1 */
+}
+
+.hds-selection-group__required {
+  color: var(--label-color-default);
+  display: inline-block;
+  font-size: var(--fontsize-body-xl);
+  line-height: 1;
+  margin-left: var(--spacing-2-xs);
+  transform: translateY(var(--spacing-3-xs));
+}
+
+.hds-selection-group__items {
+  clear: left;
+  display: grid;
+  grid-gap: var(--spacing-row) var(--spacing-col);
+  gap: var(--spacing-row) var(--spacing-col);
+  justify-content: start;
+}
+
+.hds-selection-group__items--vertical {
+  grid-auto-flow: row;
+}
+
+.hds-selection-group__items--horizontal {
+  grid-auto-flow: column;
+}
+
+.hds-selection-group__error-text {
+  background-color: var(--color-error-light);
+  border-left: 8px solid var(--color-error);
+  color: var(--color-black);
+  display: flex;
+  font-size: var(--fontsize-body-m);
+  margin-top: var(--spacing-legend);
+  padding: var(--spacing-2-xs);
+  position: relative;
+}
+
+.hds-selection-group__error-text:before {
+  background: var(--color-error);
+  content: "";
+  display: inline-block;
+  height: var(--icon-size);
+  margin-right: var(--spacing-2-xs);
+  -webkit-mask-image: 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='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  mask-image: 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='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  pointer-events: none;
+  width: var(--icon-size);
+}
+
+.hds-selection-group__helper-text-gap {
+  margin-top: var(--spacing-legend);
+}

package/lib/components/selection-group/selection-group.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/selection-group/selection-group.css%23sass","../../../src/components/selection-group/selection-group.css"],"names":[],"mappings":"AAAA;EACE,sBAAA;EACA,+BAAA;EACA,mCAAA;EACA,4CAAA;EACA,6BAAA;EAEA,SAAA;EACA,aAAA;EACA,sBAAA;EACA,SAAA;EACA,UAAA;ACAF;;ADGA;ECAA,WAAA;AACA;;ADGA;EACE;;;;GAAA;EAKA,sBAAA,EAAA,MAAA;EACA,iCAAA;EACA,cAAA;EACA,iCAAA;EACA,gBAAA;EACA,oCAAA;EAEA;;;;;GAAA;EAMA,eAAA,EAAA,MAAA;EACA,UAAA,EAAA,MAAA;EACA,mBAAA,EAAA,MAAA;ACDF;;ADIA;EACE,iCAAA;ECDF,qBAAA;EDGE,kCAAA;EACA,cAAA;EACA,gCAAA;EACA,0CAAA;ACDF;;ADIA;EACE,WAAA;ECDF,aAAA;EDGE,+CAAA;EAAA,0CAAA;EACA,sBAAA;ACDF;;ADIA;EACE,mBAAA;ACDF;;ADIA;EACE,sBAAA;ACDF;;ADIA;EACE,0CAAA;ECDF,yCAAA;EDGE,yBAAA;EACA,aAAA;EACA,iCAAA;EACA,iCAAA;EACA,4BAAA;EACA,kBAAA;ACDF;;ADIA;EACE,8BAAA;ECDF,WAAA;EDGE,qBAAA;EACA,wBAAA;EACA,iCAAA;EACA,4fAAA;EACA,ofAAA;EACA,oBAAA;EACA,uBAAA;ACDF;;ADIA;EACE,iCAAA;ACDF","file":"selection-group.css","sourcesContent":[".hds-selection-group {\n  --spacing-col: 1.25rem;\n  --spacing-row: var(--spacing-s);\n  --spacing-legend: var(--spacing-xs);\n  --label-color-default: var(--color-black-90);\n  --icon-size: var(--spacing-m);\n\n  border: 0;\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n}\n\n.hds-selection-group > *:not(.hds-selection-group__items) {\n  float: left;\n}\n\n.hds-selection-group__legend {\n  /*\n  * Normalized rules\n  * 1. Correct the text wrapping in Edge and IE.\n  *    `fieldset` elements in all browsers.\n  */\n  box-sizing: border-box; /* 1 */\n  color: var(--label-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  font-weight: 500;\n  margin-bottom: var(--spacing-legend);\n\n  /*\n  * Normalized rules\n  * 1. Correct the text wrapping in Edge and IE.\n  * 2. Remove the padding so developers are not caught out when they zero out\n  *    `fieldset` elements in all browsers.\n  */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 2 */\n  white-space: normal; /* 1 */\n}\n\n.hds-selection-group__required {\n  color: var(--label-color-default);\n  display: inline-block;\n  font-size: var(--fontsize-body-xl);\n  line-height: 1;\n  margin-left: var(--spacing-2-xs);\n  transform: translateY(var(--spacing-3-xs));\n}\n\n.hds-selection-group__items {\n  clear: left;\n  display: grid;\n  gap: var(--spacing-row) var(--spacing-col);\n  justify-content: start;\n}\n\n.hds-selection-group__items--vertical {\n  grid-auto-flow: row;\n}\n\n.hds-selection-group__items--horizontal {\n  grid-auto-flow: column;\n}\n\n.hds-selection-group__error-text {\n  background-color: var(--color-error-light);\n  border-left: 8px solid var(--color-error);\n  color: var(--color-black);\n  display: flex;\n  font-size: var(--fontsize-body-m);\n  margin-top: var(--spacing-legend);\n  padding: var(--spacing-2-xs);\n  position: relative;\n}\n\n.hds-selection-group__error-text:before {\n  background: var(--color-error);\n  content: '';\n  display: inline-block;\n  height: var(--icon-size);\n  margin-right: var(--spacing-2-xs);\n  -webkit-mask-image: 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='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  mask-image: 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='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  pointer-events: none;\n  width: var(--icon-size);\n}\n\n.hds-selection-group__helper-text-gap {\n  margin-top: var(--spacing-legend);\n}\n",".hds-selection-group {\n  --spacing-col: 1.25rem;\n  --spacing-row: var(--spacing-s);\n  --spacing-legend: var(--spacing-xs);\n  --label-color-default: var(--color-black-90);\n  --icon-size: var(--spacing-m);\n\n  border: 0;\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n}\n\n.hds-selection-group > *:not(.hds-selection-group__items) {\n  float: left;\n}\n\n.hds-selection-group__legend {\n  /*\n  * Normalized rules\n  * 1. Correct the text wrapping in Edge and IE.\n  *    `fieldset` elements in all browsers.\n  */\n  box-sizing: border-box; /* 1 */\n  color: var(--label-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  font-weight: 500;\n  margin-bottom: var(--spacing-legend);\n\n  /*\n  * Normalized rules\n  * 1. Correct the text wrapping in Edge and IE.\n  * 2. Remove the padding so developers are not caught out when they zero out\n  *    `fieldset` elements in all browsers.\n  */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 2 */\n  white-space: normal; /* 1 */\n}\n\n.hds-selection-group__required {\n  color: var(--label-color-default);\n  display: inline-block;\n  font-size: var(--fontsize-body-xl);\n  line-height: 1;\n  margin-left: var(--spacing-2-xs);\n  transform: translateY(var(--spacing-3-xs));\n}\n\n.hds-selection-group__items {\n  clear: left;\n  display: grid;\n  gap: var(--spacing-row) var(--spacing-col);\n  justify-content: start;\n}\n\n.hds-selection-group__items--vertical {\n  grid-auto-flow: row;\n}\n\n.hds-selection-group__items--horizontal {\n  grid-auto-flow: column;\n}\n\n.hds-selection-group__error-text {\n  background-color: var(--color-error-light);\n  border-left: 8px solid var(--color-error);\n  color: var(--color-black);\n  display: flex;\n  font-size: var(--fontsize-body-m);\n  margin-top: var(--spacing-legend);\n  padding: var(--spacing-2-xs);\n  position: relative;\n}\n\n.hds-selection-group__error-text:before {\n  background: var(--color-error);\n  content: '';\n  display: inline-block;\n  height: var(--icon-size);\n  margin-right: var(--spacing-2-xs);\n  -webkit-mask-image: 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='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  mask-image: 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='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  pointer-events: none;\n  width: var(--icon-size);\n}\n\n.hds-selection-group__helper-text-gap {\n  margin-top: var(--spacing-legend);\n}\n"]}

package/lib/components/selection-group/selection-group.min.css

@@ -0,0 +1 @@
+.hds-selection-group{--spacing-col:1.25rem;--spacing-row:var(--spacing-s);--spacing-legend:var(--spacing-xs);--label-color-default:var(--color-black-90);--icon-size:var(--spacing-m);border:0;display:flex;flex-direction:column;margin:0;padding:0}.hds-selection-group>:not(.hds-selection-group__items){float:left}.hds-selection-group__legend{box-sizing:border-box;color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-legend);max-width:100%;padding:0;white-space:normal}.hds-selection-group__required{color:var(--label-color-default);display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.hds-selection-group__items{clear:left;display:grid;grid-gap:var(--spacing-row) var(--spacing-col);gap:var(--spacing-row) var(--spacing-col);justify-content:start}.hds-selection-group__items--vertical{grid-auto-flow:row}.hds-selection-group__items--horizontal{grid-auto-flow:column}.hds-selection-group__error-text{background-color:var(--color-error-light);border-left:8px solid var(--color-error);color:var(--color-black);display:flex;font-size:var(--fontsize-body-m);margin-top:var(--spacing-legend);padding:var(--spacing-2-xs);position:relative}.hds-selection-group__error-text:before{background:var(--color-error);content:"";display:inline-block;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image: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='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");mask-image: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='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-selection-group__helper-text-gap{margin-top:var(--spacing-legend)}