@ks-digital/designsystem-themes 0.0.1-alpha.58 → 0.0.1-alpha.59

package/README.md

@@ -30,36 +30,16 @@ If your bundler (e.g., Vite) is configured to resolve npm packages in CSS import
 
 Import [theme].tailwind.css to get Tailwind util-classes for Designsystemet-tokens.
 
-##### v4
-
 ```css
-@layer theme, tailwind-base, ds, components, utilities;
+@layer tw-theme, tw-base, ds, tw-utilities;
 
 @import url('@ks-digital/designsystem-themes/base.css') layer(ds);
-@import url('@ks-digital/designsystem-themes/ledsagerbevis.css') layer(ds);
-
-@import 'tailwindcss/theme.css' layer(theme);
-@import 'tailwindcss/preflight.css' layer(tailwind-base);
-@import 'tailwindcss/utilities.css' layer(utilities);
-@import '@ks-digital/designsystem-themes/ledsagerbevis.tailwind.css' layer(theme);
-```
-
-##### v3 and older
-
-> **Note:**  
-> Tailwind versions earlier than v4 do **not** support mapping Tailwind utility classes directly to Designsystemet tokens.
-
-```css
-@import url('@ks-digital/designsystem-themes/base.css');
-@import url('@ks-digital/designsystem-themes/ledsagerbevis.css');
-
-@layer tailwind-base, ds;
+@import url('@ks-digital/designsystem-themes/ksdigital.css') layer(ds);
 
-@layer tailwind-base {
-  @tailwind base;
-}
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss/theme.css' layer(tw-theme);
+@import 'tailwindcss/preflight.css' layer(tw-base);
+@import 'tailwindcss/utilities.css' layer(tw-utilities);
+@import '@ks-digital/designsystem-themes/ledsagerbevis.tailwind.css' layer(tw-theme);
 ```
 
 ### In JavaScript/TypeScript Files

package/dist/base.css

@@ -40,6 +40,23 @@
 @layer ds.components{.ds-avatar-stack:focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-avatar-stack:focus-visible *{--_ds--focus: }.ds-avatar-stack[data-expandable]:focus-visible,.ds-avatar-stack[data-expandable]:hover{--_ds-captured-length:var(--_gap)}.ds-avatar-stack[data-expandable=fixed]{width:calc(var(--dsc-avatar-stack-size)*var(--dsc-avatar-count) + var(--_overlap)*(var(--dsc-avatar-count) - 1))}.ds-avatar-stack:empty{display:none}.ds-avatar-stack[data-suffix]:after{content:attr(data-suffix);font-size:max(1rem,calc(var(--dsc-avatar-stack-size)*.4));margin-left:1ch;place-self:center}.ds-avatar-stack .ds-avatar{--dsc-avatar-size:var(--dsc-avatar-stack-size);--_font-size:max(0.75rem,calc(var(--dsc-avatar-stack-size)*0.5));-webkit-mask:radial-gradient(50% 50% at calc(150% + var(--_ds-captured-length)),transparent calc(100% - 1px + var(--_gap)),#000 calc(100% + var(--_gap)));mask:radial-gradient(50% 50% at calc(150% + var(--_ds-captured-length)),transparent calc(100% - 1px + var(--_gap)),#000 calc(100% + var(--_gap)))}[data-variant=square]:is(.ds-avatar-stack .ds-avatar){-webkit-mask:linear-gradient(to right,#000 calc(100% + var(--_ds-captured-length) - var(--_gap)),transparent calc(100% + var(--_ds-captured-length) - var(--_gap)));mask:linear-gradient(to right,#000 calc(100% + var(--_ds-captured-length) - var(--_gap)),transparent calc(100% + var(--_ds-captured-length) - var(--_gap)))}:is(.ds-avatar-stack .ds-avatar):not(:first-child){margin-left:var(--_ds-captured-length)}:is(.ds-avatar-stack .ds-avatar):nth-last-child(1 of .ds-avatar){-webkit-mask:none;mask:none}@supports not selector(:nth-last-child(1 of .ds-avatar)){:is(.ds-avatar-stack .ds-avatar):not(:has(+.ds-avatar)){-webkit-mask:none;mask:none}}:is(.ds-avatar-stack .ds-avatar):not([data-size]){--dsc-avatar-font-size:var(--_font-size)}:is(.ds-avatar-stack .ds-avatar):focus-visible,:is(.ds-avatar-stack .ds-avatar):has(:focus-visible){box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));-webkit-mask:none;mask:none;outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}:is(:is(.ds-avatar-stack .ds-avatar):has(:focus-visible),:is(.ds-avatar-stack .ds-avatar):focus-visible) *{--_ds--focus: }:is(.ds-avatar-stack .ds-avatar):focus-visible,:is(.ds-avatar-stack .ds-avatar):has(:focus-visible){z-index:1}}
 @layer ds.components{.ds-suggestion{--dsc-suggestion-option-background--hover:var(--ds-color-surface-hover);--dsc-suggestion-option-background--selected:var(--ds-color-surface-active);--dsc-suggestion-option-border-radius:var(--ds-border-radius-md);--dsc-suggestion-option-checkmark-size:var(--ds-size-6);--dsc-suggestion-option-checkmark-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M18.998 6.94a.75.75 0 0 1 .063 1.058l-8 9a.75.75 0 0 1-1.091.032l-5-5a.75.75 0 1 1 1.06-1.06l4.438 4.437 7.471-8.405A.75.75 0 0 1 19 6.939' clip-rule='evenodd'/%3E%3C/svg%3E");--dsc-suggestion-option-padding:var(--ds-size-3);--dsc-suggestion-option-gap:var(--ds-size-2);--dsc-suggestion-clear-gap:var(--ds-size-2);--dsc-suggestion-clear-padding:var(--ds-size-1);--dsc-suggestion-clear-size:var(--ds-size-9);--dsc-suggestion-clear-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");--dsc-suggestion-clear-border-radius:var(--ds-border-radius-md);--dsc-suggestion-clear-background--hover:var(--ds-color-surface-hover);--dsc-suggestion-clear-background--active:var(--ds-color-surface-active);--dsc-suggestion-list-background:var(--ds-color-neutral-surface-default);--dsc-suggestion-list-border-radius:var(--ds-border-radius-md);--dsc-suggestion-list-box-shadow:var(--ds-shadow-md);--dsc-suggestion-list-color:var(--ds-color-text-default);--dsc-suggestion-list-offset:var(--ds-size-1);--dsc-suggestion-list-gap:var(--ds-size-1);--dsc-suggestion-list-placement:bottom;--dsc-suggestion-list-padding:var(--ds-size-3) var(--ds-size-2);--dsc-suggestion-border-width:var(--ds-border-width-default);--dsc-suggestion-border-style:solid;--dsc-suggestion-border-color:var(--ds-color-neutral-border-subtle);--dsc-suggestion-chip-gap:var(--ds-size-1);--dsc-suggestion-chip-background:var(--ds-color-base-default);--dsc-suggestion-chip-background--hover:var(--ds-color-base-hover);--dsc-suggestion-chip-border-width:var(--ds-border-width-default);--dsc-suggestion-chip-height:var(--ds-size-8);--dsc-suggestion-chip-font-size:var(--ds-body-sm-font-size);--dsc-suggestion-chip-border-style:solid;--dsc-suggestion-chip-border-color:transparent;--dsc-suggestion-chip-border-radius:var(--ds-border-radius-full);--dsc-suggestion-chip-padding:0 var(--ds-size-3);--dsc-suggestion-chip-color:var(--ds-color-base-contrast-default);--dsc-suggestion-chip-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");--dsc-suggestion-chip-icon-size:var(--ds-size-7);--dsc-suggestion-chip-input-size:var(--ds-size-5);--dsc-suggestion-chip-spacing:calc((var(--dsc-suggestion-chip-height) - var(--dsc-suggestion-chip-input-size))/2);box-sizing:border-box;flex-wrap:wrap;gap:var(--ds-size-1);position:relative}.ds-suggestion:not([hidden]){display:flex}.ds-suggestion:not([data-multiple]) data,.ds-suggestion[data-multiple=false] data{display:none}.ds-suggestion>data{align-items:center;background:var(--dsc-suggestion-chip-background);border-color:var(--dsc-suggestion-chip-border-color);border-radius:var(--dsc-suggestion-chip-border-radius);border-style:var(--dsc-suggestion-chip-border-style);border-width:var(--dsc-suggestion-chip-border-width);box-sizing:border-box;color:var(--dsc-suggestion-chip-color);cursor:pointer;display:inline-flex;font-size:var(--dsc-suggestion-chip-font-size);height:var(--dsc-suggestion-chip-height);line-height:var(--ds-line-height-sm);margin-bottom:var(--dsc-suggestion-chip-gap);padding:var(--dsc-suggestion-chip-padding);padding-inline-end:var(--dsc-suggestion-chip-spacing);white-space:none}:is(.ds-suggestion>data):after{background:currentcolor;content:"";height:var(--dsc-suggestion-chip-icon-size);margin-left:var(--dsc-suggestion-chip-gap);-webkit-mask:center/contain no-repeat var(--dsc-suggestion-chip-icon-url);mask:center/contain no-repeat var(--dsc-suggestion-chip-icon-url);padding-inline:0;width:var(--dsc-suggestion-chip-icon-size)}@media (forced-colors:active){:is(.ds-suggestion>data):after{background-color:CanvasText;forced-color-adjust:none}}.ds-suggestion>data{-webkit-print-color-adjust:exact;print-color-adjust:exact}:is(.ds-suggestion>data):focus{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}:is(.ds-suggestion>data):focus *{--_ds--focus: }:is(.ds-suggestion>data):hover{background:var(--dsc-suggestion-chip-background--hover)}:is(.ds-suggestion>data):has(+data){margin-inline-end:var(--dsc-suggestion-chip-gap)}.ds-suggestion u-datalist[data-is-floating]:not([style*=translate]){opacity:0}.ds-suggestion u-datalist{--_ds-floating:top;--_ds-floating-arrow-size:0;--_ds-floating-arrow-visibility:inherit;animation:ds-fade-in .15s ease-in-out forwards;margin:0;overflow:visible;position:absolute}:is(.ds-suggestion u-datalist):before{background:inherit;border:inherit;border-left-color:transparent;border-top-color:transparent;box-sizing:border-box;content:"";height:var(--_ds-floating-arrow-size);left:var(--_ds-floating-arrow-x,50%);position:absolute;rotate:45deg;top:var(--_ds-floating-arrow-y,100%);translate:-50% -50%;visibility:var(--_ds-floating-arrow-visibility);width:var(--_ds-floating-arrow-size)}[data-overscroll=contain]:is(.ds-suggestion u-datalist){--_ds-floating-overscroll:contain;overflow:auto;overscroll-behavior:contain}.ds-suggestion u-datalist{--_ds-floating:var(--dsc-suggestion-list-placement);--_ds-floating-overscroll:fit;--_ds-floating-arrow-visibility:hidden;--_ds-floating-arrow-size:var(--ds-size-2);background:var(--dsc-suggestion-list-background);border-color:var(--dsc-suggestion-border-color);border-radius:var(--dsc-suggestion-list-border-radius);border-style:var(--dsc-suggestion-border-style);border-width:var(--dsc-suggestion-border-width);box-shadow:var(--dsc-suggestion-list-box-shadow);box-sizing:border-box;color:var(--dsc-suggestion-list-color);display:none;inset:0 auto auto 0;overflow:auto;overscroll-behavior:contain;padding:var(--dsc-suggestion-list-padding);&[data-floating|=top]:before{rotate:45deg;top:100%}&[data-floating|=right]:before{left:0;rotate:135deg}&[data-floating|=bottom]:before{rotate:-135deg;top:0}&[data-floating|=left]:before{left:100%;rotate:-45deg}}:is(.ds-suggestion u-datalist):not([popover]){inset:100% 0 auto 0;margin-top:var(--dsc-suggestion-list-offset);z-index:1600}:is(.ds-suggestion u-datalist):not([hidden]):not(:empty){align-content:start;display:grid;gap:var(--dsc-suggestion-list-gap)}:is(.ds-suggestion u-datalist)>u-option{border:none;border-radius:var(--dsc-suggestion-option-border-radius);cursor:pointer;line-height:var(--ds-line-height-sm);outline:none;outline-offset:calc(var(--dsc-suggestion-option-activedecendant-outline-width)*-1);padding:var(--dsc-suggestion-option-padding);position:relative}@media (hover:hover) and (pointer:fine){:is(:is(.ds-suggestion u-datalist)>u-option):not([data-empty]):where(:hover){background:var(--dsc-suggestion-option-background--hover)}}[selected]:is(:is(.ds-suggestion u-datalist)>u-option){background-color:var(--dsc-suggestion-option-background--selected);padding-inline-start:calc(var(--dsc-suggestion-option-padding) + var(--dsc-suggestion-option-checkmark-size) + var(--dsc-suggestion-option-gap))}[selected]:is(:is(.ds-suggestion u-datalist)>u-option):before{background:currentcolor;content:"";height:var(--dsc-suggestion-option-checkmark-size);inset-inline-start:var(--dsc-suggestion-option-padding);-webkit-mask:var(--dsc-suggestion-option-checkmark-url) center /contain no-repeat;mask:var(--dsc-suggestion-option-checkmark-url) center /contain no-repeat;position:absolute;width:var(--dsc-suggestion-option-checkmark-size)}@media (forced-colors:active){[selected]:is(:is(.ds-suggestion u-datalist)>u-option):before{background-color:LinkText;forced-color-adjust:none}}[data-activedescendant]:is(:is(.ds-suggestion u-datalist)>u-option){box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow-middle));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:calc(var(--_ds--focus, 0))}[data-activedescendant]:is(:is(.ds-suggestion u-datalist)>u-option) *{--_ds--focus: }:is([data-multiple] :is(.ds-suggestion u-datalist))>u-option:not([data-empty]){--dsc-suggestion-option-checkmark-border:max(2px,0.125rem);padding-inline-start:calc(var(--dsc-suggestion-option-padding) + var(--dsc-suggestion-option-checkmark-size) + var(--dsc-suggestion-option-gap))}:is(:is([data-multiple] :is(.ds-suggestion u-datalist))>u-option:not([data-empty])):before{border-radius:var(--ds-border-radius-sm);box-sizing:border-box;content:"";height:var(--dsc-suggestion-option-checkmark-size);inset-inline-start:var(--dsc-suggestion-option-padding);-webkit-mask:none;mask:none;outline:var(--dsc-suggestion-option-checkmark-border) solid var(--ds-color-neutral-border-default);outline-offset:calc(var(--dsc-suggestion-option-checkmark-border)*-1);padding:.188rem;position:absolute;translate:0 calc(.5lh - 50%);width:var(--dsc-suggestion-option-checkmark-size)}[selected]:is(:is([data-multiple] :is(.ds-suggestion u-datalist))>u-option:not([data-empty])):before{background-color:var(--ds-color-base-default);color:var(--ds-color-base-contrast-default);outline:none;--_stroke-width:0.05em;--_stroke-width-fallback:0.05em;--_diagonal-1:transparent calc(48% - var(--_stroke-width, var(--_stroke-width-fallback)));--_diagonal-2:currentcolor calc(50% - var(--_stroke-width, var(--_stroke-width-fallback)));--_diagonal-3:currentcolor calc(50% + var(--_stroke-width, var(--_stroke-width-fallback)));--_diagonal-4:transparent calc(52% + var(--_stroke-width, var(--_stroke-width-fallback)));background-image:linear-gradient(45deg,var(--_diagonal-1),var(--_diagonal-2),var(--_diagonal-3),var(--_diagonal-4)),linear-gradient(-45deg,var(--_diagonal-1),var(--_diagonal-2),var(--_diagonal-3),var(--_diagonal-4));background-origin:content-box;background-position:10% 73%,90% 50%;background-repeat:no-repeat;background-size:35% 35%,65% 65%}@media (forced-colors:active){[selected]:is(:is([data-multiple] :is(.ds-suggestion u-datalist))>u-option:not([data-empty])):before{background-color:LinkText;border-color:LinkText;forced-color-adjust:none}}.ds-suggestion:has(input:-moz-placeholder) input{background-image:linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4));background-position:calc(100% - 1.2em + var(--dsc-input-stroke-width)),calc(100% - .8em);background-repeat:no-repeat;background-size:.4em .4em;padding-inline-end:2.4em}.ds-suggestion:has(input:placeholder-shown) input{background-image:linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4));background-position:calc(100% - 1.2em + var(--dsc-input-stroke-width)),calc(100% - .8em);background-repeat:no-repeat;background-size:.4em .4em;padding-inline-end:2.4em}:dir(rtl) :is(.ds-suggestion:has(input:-moz-placeholder) input){background-position:calc(1.2em - var(--dsc-input-stroke-width)),.8em}:dir(rtl) :is(.ds-suggestion:has(input:placeholder-shown) input){background-position:calc(1.2em - var(--dsc-input-stroke-width)),.8em}@media (forced-colors:active){.ds-suggestion:has(input:-moz-placeholder) input{-moz-appearance:auto;appearance:auto}.ds-suggestion:has(input:placeholder-shown) input{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}.ds-suggestion:has(input:-moz-placeholder):has(:popover-open) input{background-image:linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4))}.ds-suggestion:has(input:placeholder-shown):has(:popover-open) input{background-image:linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4))}.ds-suggestion input[inputmode=none]{box-shadow:none;outline:none}.ds-suggestion:has(input:is(:-moz-read-only,:disabled,[aria-disabled=true])) :is(del,button[type=reset]){visibility:hidden}.ds-suggestion :is(del[hidden],button[type=reset][hidden]),.ds-suggestion:has(input:is(:read-only,:disabled,[aria-disabled=true])) :is(del,button[type=reset]){visibility:hidden}.ds-suggestion:has(:is(del,button[type=reset])) input{padding-inline-end:calc(var(--dsc-suggestion-clear-size) + var(--dsc-suggestion-clear-gap))}.ds-suggestion input[type=search]::-webkit-search-cancel-button{display:none}.ds-suggestion :is(del,button[type=reset]){--dsc-button-size:var(--dsc-suggestion-clear-size);align-self:center;border-radius:var(--dsc-suggestion-clear-border-radius);box-sizing:border-box;cursor:pointer;display:grid;height:var(--dsc-suggestion-clear-size);margin-inline-start:calc((var(--dsc-suggestion-clear-size) + var(--dsc-suggestion-clear-gap))*-1);order:999;outline:none;padding:var(--dsc-suggestion-clear-padding);position:relative;scale:.75;width:var(--dsc-suggestion-clear-size);z-index:2}:is(.ds-suggestion :is(del,button[type=reset])):focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}:is(.ds-suggestion :is(del,button[type=reset])):focus-visible *{--_ds--focus: }:is(.ds-suggestion :is(del,button[type=reset])):hover{background:var(--dsc-suggestion-clear-background--hover)}:is(.ds-suggestion :is(del,button[type=reset])):active{background:var(--dsc-suggestion-clear-background--active)}:is(.ds-suggestion :is(del,button[type=reset])):before{background:currentcolor;content:"";-webkit-mask:var(--dsc-suggestion-clear-icon-url) center /contain no-repeat;mask:var(--dsc-suggestion-clear-icon-url) center /contain no-repeat}@media (forced-colors:active){:is(.ds-suggestion :is(del,button[type=reset])):before{background-color:canvastext;forced-color-adjust:none}}}
 @layer ds.components{.ds-textfield{display:grid;gap:var(--ds-size-2)}.ds-textfield__adornment{background:var(--ds-color-neutral-surface-tinted);border-radius:var(--ds-border-radius-md);color:var(--ds-color-neutral-text-subtle);display:inline-block;padding:9px var(--ds-size-4)}.ds-textfield__adornment,.ds-textfield__input{border:1px solid var(--ds-color-neutral-border-default);box-sizing:border-box}.ds-textfield__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--ds-color-neutral-surface-default);border-radius:var(--ds-border-radius-md);color:var(--ds-color-neutral-text-default);flex:0 1 auto;font-family:inherit;padding:0 var(--ds-size-3);position:relative;width:100%}.ds-textfield__input:disabled{cursor:not-allowed}.ds-textfield--readonly .ds-textfield__input{background:var(--ds-color-neutral-surface-tinted);border-color:var(--ds-color-neutral-border-strong)}.ds-textfield__field{align-items:stretch;border-radius:var(--ds-border-radius-md);display:flex}.ds-textfield__field>:first-child{border-bottom-left-radius:var(--ds-border-radius-md);border-top-left-radius:var(--ds-border-radius-md)}.ds-textfield__field>:last-child{border-bottom-right-radius:var(--ds-border-radius-md);border-top-right-radius:var(--ds-border-radius-md)}.ds-textfield--sm .ds-textfield__adornment{padding:var(--ds-size-2) var(--ds-size-3)}.ds-textfield--md .ds-textfield__adornment{padding:.65rem var(--ds-size-4)}.ds-textfield--lg .ds-textfield__adornment{padding:.85rem var(--ds-size-5)}.ds-textfield--sm .ds-textfield__field{height:var(--ds-size-10)}.ds-textfield--md .ds-textfield__field{height:var(--ds-size-12)}.ds-textfield--lg .ds-textfield__field{height:var(--ds-size-14)}.ds-textfield--sm .ds-textfield__input{padding:0 var(--ds-size-2)}.ds-textfield--md .ds-textfield__input{padding:0 var(--ds-size-3)}.ds-textfield--lg .ds-textfield__input{padding:0 var(--ds-size-4)}.ds-textfield__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--ds-size-1);min-width:-moz-min-content;min-width:min-content}.ds-textfield__description{color:var(--ds-color-neutral-text-subtle);margin-top:calc(var(--ds-size-2)*-1)}.ds-textfield:has(.ds-textfield__input:disabled){opacity:var(--ds-opacity-disabled)}.ds-textfield--error .ds-textfield__input:not(:focus-visible){border-color:var(--ds-color-danger-border-default);box-shadow:inset 0 0 0 1px var(--ds-color-danger-border-default)}@media (hover:hover) and (pointer:fine){.ds-textfield__input:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--ds-color-border-strong);box-shadow:inset 0 0 0 1px var(--ds-color-border-strong)}}.ds-textfield__input--with-prefix{border-bottom-left-radius:0;border-top-left-radius:0}.ds-textfield__input--with-suffix{border-bottom-right-radius:0;border-top-right-radius:0}.ds-textfield__prefix{border-bottom-right-radius:0;border-right:0;border-top-right-radius:0;white-space:nowrap}.ds-textfield__suffix{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0;white-space:nowrap}.ds-textfield__readonly__icon{height:1.2em;width:1.2em}.ds-textfield__error-message:empty{display:none}.ds-combobox{background-color:initial;display:grid;gap:var(--ds-size-2)}.ds-combobox [data-floating-ui-portal]{grid-column:1/2;grid-row:1/2}.ds-combobox__options-wrapper{background:var(--ds-color-neutral-surface-default);border:1px solid var(--ds-color-neutral-border-default);border-radius:var(--ds-border-radius-md);box-shadow:var(--ds-shadow-md);color:var(--ds-color-neutral-text-default);overflow-y:auto;padding:var(--ds-size-2);z-index:1600}.ds-combobox--readonly .ds-combobox__input{pointer-events:none}.ds-combobox__input__wrapper{align-items:center;border-radius:var(--ds-border-radius-md);cursor:text;display:flex;gap:var(--ds-size-1);height:auto;justify-content:space-between;padding:var(--ds-size-2);position:relative;width:100%}.ds-combobox__input__wrapper .ds-combobox__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:initial;border:none;box-sizing:border-box;color:var(--ds-color-neutral-text-default);flex-grow:1;font-family:inherit;font-size:inherit;font-weight:inherit;height:100%;line-height:inherit;min-width:50px;width:100%}.ds-combobox--sm .ds-combobox__input__wrapper{min-height:var(--ds-size-10);padding:5px var(--ds-size-2)}.ds-combobox--md .ds-combobox__input__wrapper{min-height:var(--ds-size-12);padding:7px var(--ds-size-3)}.ds-combobox--lg .ds-combobox__input__wrapper{min-height:var(--ds-size-14);padding:7px var(--ds-size-4)}.ds-combobox__input__wrapper .ds-combobox__input:focus{outline:none}.ds-combobox__input__wrapper.ds-combobox--error{border-color:var(--ds-color-danger-border-default);border-width:2px}.ds-combobox__chip-and-input{align-items:center;background-color:initial;display:flex;flex-wrap:wrap;gap:var(--ds-size-2);width:100%}.ds-combobox__arrow{cursor:pointer;display:grid;place-items:center}.ds-combobox__input__wrapper.ds-combobox--readonly{background:var(--ds-color-base-default);border-color:var(--ds-color-base-default)}.ds-combobox__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--ds-size-1);grid-column:1/2;grid-row:1/2;min-width:-moz-min-content;min-width:min-content}.ds-combobox__description{color:var(--ds-color-neutral-text-subtle);margin-top:calc(var(--ds-size-2)*-1)}.ds-combobox__clear-button{aspect-ratio:1;background-color:initial;border:none;border-radius:var(--ds-border-radius-sm);color:var(--ds-color-neutral-text-default);cursor:pointer;display:grid;height:29px;padding:0;place-items:center;width:29px}.ds-combobox--sm .ds-combobox__clear-button{height:25px;width:25px}.ds-combobox--md .ds-combobox__clear-button{height:29px;width:29px}.ds-combobox--lg .ds-combobox__clear-button{height:31px;width:31px}.ds-combobox__clear-button:not(:disabled):hover{background-color:var(--ds-color-neutral-surface-tinted)}.ds-combobox__disabled{opacity:var(--ds-opacity-disabled)}.ds-combobox__disabled *{cursor:not-allowed}.ds-combobox__readonly__icon{height:1.2em;width:1.2em}.ds-combobox__error-message{margin-top:var(--ds-size-2)}.ds-combobox__error-message:empty{display:none}.ds-combobox__loading{align-content:center;display:flex;gap:var(--ds-size-2)}.ds-combobox__input__wrapper:has(input:focus){--dsc-focus-border-width:3px;box-shadow:0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);outline:var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);outline-offset:var(--dsc-focus-border-width)}.ds-combobox__input__wrapper:focus-within:hover{border-color:var(--ds-color-neutral-border-default)}.ds-combobox__custom,.ds-combobox__empty,.ds-combobox__option{font-weight:400;padding:var(--ds-size-2) var(--ds-size-3)}.ds-combobox__option{background:none;border:none;border-left:5px solid transparent;border-radius:var(--ds-border-radius-sm);cursor:pointer;display:grid;font-family:inherit;grid-template-columns:1.2em 1fr;height:auto;justify-content:start;padding-left:var(--ds-size-1);text-align:left;width:100%}.ds-combobox__option.ds-combobox__option--active{background:var(--ds-color-surface-tinted);border-left:5px solid var(--ds-color-base-default)}.ds-combobox__option>div{align-self:flex-start}.ds-combobox__option.ds-combobox__option--multiple{gap:var(--ds-size-2);grid-template-columns:auto 1fr}.ds-combobox__option__label{color:var(--ds-color-neutral-text-default);cursor:pointer;display:flex;flex-direction:column;flex-wrap:wrap;gap:var(--ds-size-1);margin:auto 0}.ds-combobox__option--active .ds-combobox__option__label{color:var(--ds-color-text-default)}.ds-combobox__option__icon-wrapper{aspect-ratio:1/1;background-color:var(--ds-color-neutral-surface-default);border:2px solid var(--ds-color-neutral-border-default);border-radius:var(--ds-border-radius-sm);display:grid;place-items:center;width:var(--ds-size-6)}.ds-combobox__option--active .ds-combobox__option__icon-wrapper{border-color:var(--ds-color-base-default)}.ds-combobox--sm .ds-combobox__option .ds-combobox__option__icon-wrapper{width:var(--ds-size-5)}.ds-combobox--md .ds-combobox__option .ds-combobox__option__icon-wrapper{width:var(--ds-size-6)}.ds-combobox--lg .ds-combobox__option .ds-combobox__option__icon-wrapper{width:var(--ds-size-7)}.ds-combobox__option__icon-wrapper.ds-combobox__option__icon-wrapper--selected{background-color:var(--ds-color-base-default);border-color:var(--ds-color-base-default)}.ds-combobox__option__icon-wrapper__icon{box-sizing:border-box;padding-top:.2em;transform:scale(1.4);stroke:var(--ds-color-neutral-text-default);color:var(--ds-color-neutral-text-default)}.ds-combobox__option__icon-wrapper .ds-combobox__option__icon-wrapper__icon{padding-top:0}.ds-combobox__option--active .ds-combobox__option__icon-wrapper__icon{stroke:var(--ds-color-text-default);color:var(--ds-color-text-default)}.ds-combobox__option__icon-wrapper.ds-combobox__option__icon-wrapper--selected .ds-combobox__option__icon-wrapper__icon{color:#fff;stroke:#fff}.ds-combobox__option__description{color:var(--ds-color-neutral-text-subtle);display:flex;flex-direction:column;flex-wrap:wrap;font-weight:400;gap:var(--ds-size-1)}}
+@layer ksd {
+  /**
+   * Use Phosphor Icons
+   */
+  .ds-alert {
+    --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128A104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z'/%3E%3C/svg%3E");
+  }
+  .ds-alert[data-color='warning'] {
+    --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M120,136V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0ZM232,91.55v72.9a15.86,15.86,0,0,1-4.69,11.31l-51.55,51.55A15.86,15.86,0,0,1,164.45,232H91.55a15.86,15.86,0,0,1-11.31-4.69L28.69,175.76A15.86,15.86,0,0,1,24,164.45V91.55a15.86,15.86,0,0,1,4.69-11.31L80.24,28.69A15.86,15.86,0,0,1,91.55,24h72.9a15.86,15.86,0,0,1,11.31,4.69l51.55,51.55A15.86,15.86,0,0,1,232,91.55Zm-16,0L164.45,40H91.55L40,91.55v72.9L91.55,216h72.9L216,164.45ZM128,160a12,12,0,1,0,12,12A12,12,0,0,0,128,160Z'/%3E%3C/svg%3E");
+  }
+  .ds-alert[data-color='success'] {
+    --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E");
+  }
+  .ds-alert[data-color='danger'] {
+    --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E");
+  }
+}
 /*
 Base CSS for all themes
 */
@@ -47,3 +64,4 @@ body {
   font-family: 'Inter', sans-serif;
   font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */
 }
+@layer ksd, ds;

package/package.json

@@ -5,7 +5,7 @@
     "url": "https://github.com/ks-no/designsystem.git",
     "directory": "packages/themes"
   },
-  "version": "0.0.1-alpha.58",
+  "version": "0.0.1-alpha.59",
   "license": "MIT",
   "private": false,
   "publishConfig": {