@odx/foundation 1.0.0-beta.99 → 1.0.0-rc.0

package/dist/oss-licenses.json

@@ -0,0 +1 @@
+[]

package/dist/styles.css

@@ -1 +1 @@
-@layer reset,base,variant,state,theme;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas,svg{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}odx-accordion-item[expanded]::part(indicator){--rotate: 0}}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}h6{line-height:var(--odx-breakpoint-line-height-heading-6);font-size:var(--odx-breakpoint-font-size-heading-6)}h5{line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}h4{line-height:var(--odx-breakpoint-line-height-heading-4);font-size:var(--odx-breakpoint-font-size-heading-4)}h3{line-height:var(--odx-breakpoint-line-height-heading-3);font-size:var(--odx-breakpoint-font-size-heading-3)}h2{line-height:var(--odx-breakpoint-line-height-heading-2);font-size:var(--odx-breakpoint-font-size-heading-2)}h1{line-height:var(--odx-breakpoint-line-height-heading-1);font-size:var(--odx-breakpoint-font-size-heading-1)}}:root{--odx-color-stroke-control-rest: var(--odx-color-stroke-primary-rest);--odx-color-stroke-control-hover: var(--odx-color-stroke-primary-rest);--odx-color-stroke-control-pressed: var(--odx-color-stroke-primary-rest);--odx-color-stroke-control-readonly: var(--odx-color-stroke-primary-rest);--odx-color-background-control-selected: var(--odx-color-background-primary-rest);--odx-color-background-control-selected-hover: var(--odx-color-background-primary-hover);--odx-color-background-control-selected-pressed: var(--odx-color-background-primary-pressed)}@layer base{:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px;scrollbar-color:var(--odx-color-background-brand) var(--odx-palette-transparent)}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}
+@layer odx.reset{.odx-root{&,*,:before,:after{box-sizing:border-box}:not(:defined){visibility:hidden}& h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,dl,dt,dd,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input{appearance:none;border:0;margin:0;padding:0}& h1,h2,h3,h4,h5,h6{text-wrap:balance}& h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}& p{text-wrap:pretty}& img,picture,video,canvas,embed,iframe,object{max-width:100%;display:block}& button{font-family:inherit}& input,textarea,select{font-feature-settings:inherit;font-family:inherit;font-size:inherit}[popover]{border:none;outline:none}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){:before,*,:after{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}}@layer odx.base{.odx-slot-placeholder-sm,.odx-slot-placeholder{background-color:var(--odx-color-background-accent-subtle);padding:var(--odx-spacing-layout-sm) var(--odx-spacing-layout-lg);width:100%;height:100%;min-height:var(--odx-control-height-md);text-align:center;text-overflow:ellipsis;pointer-events:none;-webkit-user-select:none;user-select:none;flex:1;place-content:center;overflow:hidden;&:before,&:after{display:block}&:before{text-transform:capitalize;font-size:var(--odx-typography-font-size-text-sm);font-weight:var(--odx-typography-font-weight-medium);content:attr(slot,"default") " slot"}&:after{line-height:var(--odx-typography-line-height-text-xs);color:var(--odx-color-foreground-subtle);font-size:var(--odx-typography-font-size-text-xs);content:"This is a placeholder. A Replace with your own content"}}.odx-slot-placeholder-sm{padding:var(--odx-spacing-12) var(--odx-spacing-layout-sm);min-height:var(--odx-control-addon-size-md);font-size:var(--odx-typography-font-size-text-sm);&:after{display:none}}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-spacing-layout-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-shrink{flex:none}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-spacing-layout-md);--_max-column-size:calc((100% - var(--gap) * (var(--max-columns) + 1)) / var(--max-columns));--_min-column-size:min(100%, max(var(--min-column-size), var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size), 1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}.odx-content :where(table),.odx-table{--cell-size:var(--odx-size-300);border-collapse:collapse;background-color:#0000;width:100%;max-width:100%;& caption{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm);font-weight:var(--odx-typography-font-weight-semibold)}& thead{background-color:inherit}& tr{transition:var(--odx-motion-transition-reduced);background-color:var(--odx-color-background-transparent);transition-property:background-color,color}& tr:has(td):hover{background-color:var(--odx-color-background-transparent-hover)}& th,td{padding:var(--odx-control-spacing-md) var(--odx-control-spacing-inline-md);min-height:var(--odx-size-250);text-align:start;font-size:inherit}& th{border-bottom:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);cursor:default;vertical-align:top;font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none}& td{height:var(--cell-size);vertical-align:middle}& tr:not(:last-child) td{border-bottom:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle)}& th :is(odx-input,odx-select){margin-inline:var(--odx-spacing-negative-50)}}.odx-content{--_content-spacing-sm:var(--odx-spacing-layout-sm);--_content-spacing-md:var(--odx-spacing-layout-md);--_content-spacing-lg:var(--odx-spacing-layout-lg);line-height:var(--odx-typography-line-height-text-md);& table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe{margin:var(--_content-spacing-md) 0}:is(odx-key-value-list,odx-list){margin-block:var(--_content-spacing-md);:is(odx-key-value-list,odx-list){margin-block:0}}>:is(odx-text,.odx-text),li>:is(ul,ol,dl),p,li{margin:var(--_content-spacing-sm) 0}:is(odx-text,.odx-text),p{&:first-child{margin-block-start:0}}>:is(odx-title,[class*=odx-title]),h1,h2,h3,h4,h5,h6{margin-block:var(--_content-spacing-lg) var(--_content-spacing-sm);&:first-child{margin-block-start:var(--_content-spacing-sm)}}& table,ul,ol,dl,blockquote{padding-inline-start:var(--odx-spacing-150)}& code,pre,mark{border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}& code,pre{background-color:var(--odx-color-background-control-rest);font-size:var(--odx-typography-font-size-text-sm)}& blockquote{padding-inline-end:var(--odx-spacing-150)}& dt{font-weight:var(--odx-typography-font-weight-medium)}& a{text-decoration:underline}& del{color:var(--odx-color-foreground-danger-rest)}& figure{flex-direction:column;display:flex}& figcaption{padding:var(--_content-spacing-sm);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}& ins{color:var(--odx-color-foreground-success-rest);text-decoration:none}& mark{background-color:var(--odx-color-background-selection);color:var(--odx-color-foreground-rest)}& pre{padding:var(--odx-control-spacing-md) calc(2 * var(--odx-control-spacing-inline-md))}& small{font-size:var(--odx-typography-font-size-text-sm)}& var{font-weight:var(--odx-typography-font-weight-medium)}}.odx-content-sm{--_content-spacing-md:var(--odx-spacing-layout-sm);--_content-spacing-lg:var(--odx-spacing-layout-md);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}.odx-content-box{background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-layout-lg);border-radius:0}.odx-link,.odx-root a{transition:var(--odx-motion-transition-reduced);cursor:pointer;overflow:inherit;vertical-align:baseline;text-align:start;-webkit-text-decoration:initial;text-decoration:initial;text-overflow:inherit;color:var(--odx-color-foreground-accent-rest);-webkit-user-select:text;user-select:text;border-radius:1px;outline:0;font-family:inherit;font-size:1em;transition-property:color;display:inline-block;&:active{color:var(--odx-color-foreground-accent-pressed)}&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&[disabled]{color:var(--odx-color-foreground-disabled-rest);pointer-events:none;-webkit-user-select:none;user-select:none}@media(hover:hover){&:hover:not([disabled],:active,:focus-visible){color:var(--odx-color-foreground-accent-hover);text-decoration:underline}}}.odx-text{font-weight:var(--odx-typography-font-weight-normal);overflow-wrap:break-word;display:block}.odx-text-inline{display:inline-block}.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}.odx-text-neutral{color:var(--odx-color-foreground-rest)}.odx-text-accent{color:var(--odx-color-foreground-accent-rest)}.odx-text-success{color:var(--odx-color-foreground-success-rest)}.odx-text-danger{color:var(--odx-color-foreground-danger-rest)}.odx-text-subtle{color:var(--odx-color-foreground-subtle)}.odx-text-disabled{color:var(--odx-color-foreground-disabled-rest)}[class*=odx-title],.odx-root :is(h1,h2,h3,h4,h5,h6){text-align:start;font-weight:var(--odx-typography-font-weight-semibold);text-wrap:balance;overflow-wrap:break-word;display:block}.odx-title{line-height:inherit;font-size:inherit}.odx-title-xs,.odx-root h6{line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}.odx-title-sm,.odx-root h5{line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}.odx-title-md,.odx-root h4{line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}.odx-title-lg,.odx-root h3{line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}.odx-title-xl,.odx-root h2,.odx-title-xxl,.odx-root h1,[class*=odx-title-display-]{font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xl,.odx-root h2{line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}.odx-title-xxl,.odx-root h1{line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}:root{interpolate-size:allow-keywords}.odx-root{tab-size:4;line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji";font-size:var(--odx-typography-font-size-base);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scrollbar-width:thin;::selection{background-color:var(--odx-color-background-selection);color:var(--odx-color-foreground-rest)}}html.odx-root{scroll-behavior:smooth;scrollbar-color:var(--odx-color-special-scrollbar) transparent;height:100%;&:not(:has(body.odx-light-mode),:has(body.odx-dark-mode)){background-color:var(--odx-color-background-base)}}}@layer odx.overrides{.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}.odx-w-xs{max-width:var(--odx-layout-width-xs)}.odx-w-sm{max-width:var(--odx-layout-width-sm)}.odx-w-md{max-width:var(--odx-layout-width-md)}.odx-w-lg{max-width:var(--odx-layout-width-lg)}.odx-w-xl{max-width:var(--odx-layout-width-xl)}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-g-sm{--gap:var(--odx-spacing-layout-sm);gap:var(--odx-spacing-layout-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-layout-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-layout-sm)}.odx-g-md{--gap:var(--odx-spacing-layout-md);gap:var(--odx-spacing-layout-md)}.odx-gx-md{column-gap:var(--odx-spacing-layout-md)}.odx-gy-md{row-gap:var(--odx-spacing-layout-md)}.odx-g-lg{--gap:var(--odx-spacing-layout-lg);gap:var(--odx-spacing-layout-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-layout-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-layout-lg)}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-p-sm{padding:var(--odx-spacing-layout-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-layout-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-layout-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-layout-sm)}.odx-py-sm{padding-block:var(--odx-spacing-layout-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-layout-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-layout-sm)}.odx-p-md{padding:var(--odx-spacing-layout-md)}.odx-px-md{padding-inline:var(--odx-spacing-layout-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-layout-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-layout-md)}.odx-py-md{padding-block:var(--odx-spacing-layout-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-layout-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-layout-md)}.odx-p-lg{padding:var(--odx-spacing-layout-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-layout-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-layout-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-layout-lg)}.odx-py-lg{padding-block:var(--odx-spacing-layout-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-layout-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-layout-lg)}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-m-sm{margin:var(--odx-spacing-layout-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-layout-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-layout-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-layout-sm)}.odx-my-sm{margin-block:var(--odx-spacing-layout-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-layout-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-layout-sm)}.odx-m-md{margin:var(--odx-spacing-layout-md)}.odx-mx-md{margin-inline:var(--odx-spacing-layout-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-layout-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-layout-md)}.odx-my-md{margin-block:var(--odx-spacing-layout-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-layout-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-layout-md)}.odx-m-lg{margin:var(--odx-spacing-layout-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-layout-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-layout-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-layout-lg)}.odx-my-lg{margin-block:var(--odx-spacing-layout-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-layout-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-layout-lg)}}

package/package.json

@@ -1,71 +1,43 @@
 {
   "name": "@odx/foundation",
-  "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.99",
+  "displayName": "ODX Design System Foundation",
+  "description": "The design foundation of the ODX Design System, providing base styles and utilities",
+  "version": "1.0.0-rc.0",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
   "files": [
     "dist",
+    "CHANGELOG.md",
     "LICENSE",
-    "!assets",
-    "!dist/**/*.map",
-    "!dist/**/*.stories.d.ts",
-    "custom-elements.json"
+    "!dist/**/*.map"
   ],
   "type": "module",
   "dependencies": {
-    "@preact/signals-core": "1.8.0",
-    "lit": "3.3.0"
+    "@lit-labs/signals": "0.2.0",
+    "signal-polyfill": "0.2.2"
   },
   "peerDependencies": {
-    "@odx/design-tokens": "^1.0.2",
-    "@odx/icons": "^4.0.0-rc.29"
+    "@odx/design-tokens": "^4.0.0"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "0.10.4",
-    "@floating-ui/dom": "1.7.0",
-    "@lit-labs/preact-signals": "1.0.3",
-    "@lit/context": "1.1.5",
-    "@odx/icons": "4.0.0-rc.29",
-    "@spectrum-web-components/reactive-controllers": "1.6.0",
-    "@wc-toolkit/cem-inheritance": "1.0.4",
-    "@wc-toolkit/cem-validator": "1.0.3",
-    "@wc-toolkit/module-path-resolver": "1.0.0",
-    "@wc-toolkit/type-parser": "1.0.3",
-    "es-toolkit": "1.37.2",
-    "stylelint": "16.19.1",
-    "stylelint-config-concentric-order": "5.2.1",
-    "stylelint-config-standard": "38.0.0",
-    "ts-lit-plugin": "2.0.2",
-    "vite": "6.3.5",
-    "vite-plugin-dts": "4.5.4",
-    "@odx/typescript-config": "0.0.0",
-    "@odx/storybook-utils": "0.0.0"
+    "@vitest/browser-playwright": "4.0.18",
+    "lit": "3.3.2",
+    "stylelint": "17.3.0",
+    "vitest": "4.0.18",
+    "@odx-internal/utils-storybook": "0.0.0",
+    "@odx-internal/config-vite": "0.0.0",
+    "@odx-internal/config-stylelint": "0.0.0",
+    "@odx-internal/config-typescript": "0.0.0"
   },
+  "style": "./dist/styles.css",
   "sideEffects": [
-    "dist/i18n.js",
-    "dist/loader.js",
-    "dist/styles.css"
+    "./**/*.css"
   ],
   "exports": {
     ".": {
       "import": "./dist/main.js",
-      "types": "./dist/lib/main.d.ts"
-    },
-    "./components": {
-      "import": "./dist/components.js",
-      "types": "./dist/components/main.d.ts"
-    },
-    "./components/*": null,
-    "./i18n": {
-      "import": "./dist/i18n.js",
-      "types": "./dist/i18n/main.d.ts"
-    },
-    "./i18n/*": null,
-    "./loader": {
-      "import": "./dist/loader.js",
-      "types": "./dist/components/loader.d.ts"
+      "types": "./dist/main.d.ts"
     },
     "./styles": "./dist/styles.css"
   },
@@ -73,11 +45,16 @@
     "access": "public",
     "tag": "latest"
   },
+  "stylelint": {
+    "extends": "@odx-internal/config-stylelint"
+  },
   "scripts": {
     "build": "vite build",
-    "dev:tsc": "tsc --build --noEmit --watch",
     "dev": "vite build --watch --mode=development",
-    "lint": "biome lint lib i18n styles components",
-    "generate:manifest": "cem analyze"
+    "dev:tsc": "tsc --build tsconfig.lib.json --noEmit --watch",
+    "lint": "biome lint src",
+    "lint:styles": "stylelint '**/*.css'",
+    "test": "vitest run",
+    "test:watch": "vitest --watch"
   }
 }

package/dist/_virtual_class-decorator-runtime.js

@@ -1,13 +0,0 @@
-var __defProp = Object.defineProperty;
-  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-
-          const __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-
-export { __decorateClass as _ };

package/dist/components/accordion/accordion.d.ts

@@ -1,25 +0,0 @@
-import { CustomElement, ValuesOf } from '../../lib/main.js';
-import { PropertyValues } from 'lit';
-import { AccordionItemSize, OdxAccordionItem } from '../accordion-item/accordion-item.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-accordion': OdxAccordion;
-    }
-}
-export type AccordionIndicatorPosition = ValuesOf<typeof AccordionIndicatorPosition>;
-export declare const AccordionIndicatorPosition: {
-    readonly START: "start";
-    readonly END: "end";
-};
-export declare class OdxAccordion extends CustomElement {
-    /** @internal */
-    items: OdxAccordionItem[];
-    compact: boolean;
-    indicatorPosition: AccordionIndicatorPosition;
-    multiple: boolean;
-    size?: AccordionItemSize;
-    constructor();
-    protected updated(props: PropertyValues<this>): void;
-    toggleAll(state?: boolean, emitEvent?: boolean): void;
-}
-//# sourceMappingURL=accordion.d.ts.map

package/dist/components/accordion-item/accordion-item.d.ts

@@ -1,26 +0,0 @@
-import { CanBeExpanded, InteractiveElement, ValuesOf } from '../../lib/main.js';
-import { PropertyValues, TemplateResult } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-accordion-item': OdxAccordionItem;
-    }
-}
-export type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
-export declare const AccordionItemSize: Pick<{
-    readonly XS: "xs";
-    readonly SM: "sm";
-    readonly MD: "md";
-    readonly LG: "lg";
-    readonly XL: "xl";
-    readonly XXL: "xxl";
-}, "MD" | "LG">;
-declare const OdxAccordionItem_base: import('../../lib/main.js').Constructor<CanBeExpanded> & typeof InteractiveElement;
-export declare class OdxAccordionItem extends OdxAccordionItem_base {
-    #private;
-    size: AccordionItemSize;
-    get panel(): HTMLElement | null;
-    protected renderContent(): TemplateResult;
-    protected willUpdate(props: PropertyValues<this>): void;
-}
-export {};
-//# sourceMappingURL=accordion-item.d.ts.map

package/dist/components/accordion-panel/accordion-panel.d.ts

@@ -1,13 +0,0 @@
-import { CustomElement } from '../../lib/main.js';
-import { TemplateResult } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-accordion-panel': OdxAccordionPanel;
-    }
-}
-export declare class OdxAccordionPanel extends CustomElement {
-    hidden: boolean;
-    connectedCallback(): void;
-    protected render(): TemplateResult;
-}
-//# sourceMappingURL=accordion-panel.d.ts.map

package/dist/components/action-button/action-button.d.ts

@@ -1,27 +0,0 @@
-import { OdxIconName } from '@odx/icons';
-import { PropertyValues, TemplateResult } from 'lit';
-import { OdxButton } from '../button/button.js';
-import { OdxTooltip } from '../tooltip/tooltip.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-action-button': OdxActionButton;
-    }
-}
-export declare class OdxActionButton extends OdxButton {
-    #private;
-    protected tooltip?: OdxTooltip;
-    /** @internal */
-    protected isStatusMessageShown: boolean;
-    done: boolean;
-    icon: OdxIconName | undefined;
-    statusIcon: OdxIconName;
-    statusMessage: string;
-    statusTimeout: number;
-    statusMessageTimeout: number;
-    replaceContent: boolean;
-    protected firstUpdated(props: PropertyValues<this>): void;
-    protected render(): TemplateResult;
-    protected renderContent(): TemplateResult;
-    protected willUpdate(props: PropertyValues<this>): void;
-}
-//# sourceMappingURL=action-button.d.ts.map

package/dist/components/anchor-navigation/anchor-navigation.d.ts

@@ -1,21 +0,0 @@
-import { CustomElement } from '../../lib/main.js';
-import { PropertyValues, TemplateResult } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-anchor-navigation': OdxAnchorNavigation;
-    }
-}
-declare const OdxAnchorNavigation_base: typeof CustomElement;
-export declare class OdxAnchorNavigation extends OdxAnchorNavigation_base {
-    #private;
-    container?: string;
-    vertical: boolean;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    renderAnchorLink(anchor: Element, isActive?: boolean): TemplateResult;
-    protected render(): TemplateResult;
-    protected updated(props: PropertyValues<this>): void;
-}
-export {};
-//# sourceMappingURL=anchor-navigation.d.ts.map

package/dist/components/anchor-navigation/anchor-observer.d.ts

@@ -1,11 +0,0 @@
-export declare class AnchorObserver {
-    #private;
-    readonly root: Element | Document;
-    readonly anchors: import('@preact/signals-core').Signal<Element[]>;
-    readonly visibleAnchors: import('@preact/signals-core').ReadonlySignal<Element[]>;
-    constructor(root?: Element | null);
-    observe(): void;
-    disconnect(): void;
-    updateAnchors: () => void;
-}
-//# sourceMappingURL=anchor-observer.d.ts.map

package/dist/components/anchor-navigation/index.d.ts

@@ -1,3 +0,0 @@
-export * from './anchor-navigation.js';
-export * from './anchor-observer.js';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/area-header/area-header.d.ts

@@ -1,21 +0,0 @@
-import { CustomElement, ValuesOf } from '../../lib/main.js';
-import { TemplateResult } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-area-header': OdxAreaHeader;
-    }
-}
-export type AreaHeaderSize = ValuesOf<typeof AreaHeaderSize>;
-export declare const AreaHeaderSize: Pick<{
-    readonly XS: "xs";
-    readonly SM: "sm";
-    readonly MD: "md";
-    readonly LG: "lg";
-    readonly XL: "xl";
-    readonly XXL: "xxl";
-}, "SM" | "MD" | "LG" | "XL">;
-export declare class OdxAreaHeader extends CustomElement {
-    size: AreaHeaderSize;
-    protected render(): TemplateResult;
-}
-//# sourceMappingURL=area-header.d.ts.map

package/dist/components/avatar/avatar.d.ts

@@ -1,36 +0,0 @@
-import { CustomElement, ValuesOf } from '../../lib/main.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-avatar': OdxAvatar;
-    }
-}
-export type AvatarShape = ValuesOf<typeof AvatarShape>;
-export declare const AvatarShape: Pick<{
-    readonly CIRCLE: "circle";
-    readonly RECTANGLE: "rectangle";
-}, "CIRCLE" | "RECTANGLE">;
-export type AvatarSize = ValuesOf<typeof AvatarSize>;
-export declare const AvatarSize: Pick<{
-    readonly XS: "xs";
-    readonly SM: "sm";
-    readonly MD: "md";
-    readonly LG: "lg";
-    readonly XL: "xl";
-    readonly XXL: "xxl";
-}, "SM" | "MD" | "LG" | "XL" | "XXL">;
-export type AvatarVariant = ValuesOf<typeof AvatarVariant>;
-export declare const AvatarVariant: Pick<{
-    readonly NEUTRAL: "neutral";
-    readonly PRIMARY: "primary";
-    readonly ACCENT: "accent";
-    readonly SUCCESS: "success";
-    readonly WARNING: "warning";
-    readonly DANGER: "danger";
-    readonly GHOST: "ghost";
-}, "NEUTRAL" | "PRIMARY" | "ACCENT">;
-export declare class OdxAvatar extends CustomElement {
-    shape: AvatarShape;
-    size: AvatarSize;
-    variant: AvatarVariant;
-}
-//# sourceMappingURL=avatar.d.ts.map

package/dist/components/avatar-group/avatar-group.d.ts

@@ -1,15 +0,0 @@
-import { CustomElement } from '../../lib/main.js';
-import { PropertyValues } from 'lit';
-import { AvatarSize, AvatarVariant, OdxAvatar } from '../avatar/avatar.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-avatar-group': OdxAvatarGroup;
-    }
-}
-export declare class OdxAvatarGroup extends CustomElement implements Pick<OdxAvatar, 'size' | 'variant'> {
-    avatars: OdxAvatar[];
-    size: AvatarSize;
-    variant: AvatarVariant;
-    protected updated(props: PropertyValues<this>): void;
-}
-//# sourceMappingURL=avatar-group.d.ts.map

package/dist/components/badge/badge.d.ts

@@ -1,24 +0,0 @@
-import { CustomElement, ValuesOf } from '../../lib/main.js';
-import { TemplateResult } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-badge': OdxBadge;
-    }
-}
-export type BadgeVariant = ValuesOf<typeof BadgeVariant>;
-export declare const BadgeVariant: Pick<{
-    readonly NEUTRAL: "neutral";
-    readonly PRIMARY: "primary";
-    readonly ACCENT: "accent";
-    readonly SUCCESS: "success";
-    readonly WARNING: "warning";
-    readonly DANGER: "danger";
-    readonly GHOST: "ghost";
-}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
-export declare class OdxBadge extends CustomElement {
-    compact: boolean;
-    pulse: boolean;
-    variant: BadgeVariant;
-    protected render(): TemplateResult;
-}
-//# sourceMappingURL=badge.d.ts.map

package/dist/components/breadcrumbs/breadcrumbs-item.d.ts

@@ -1,17 +0,0 @@
-import { CustomElement } from '../../lib/main.js';
-import { PropertyValues, TemplateResult } from 'lit';
-import { OdxLink } from '../link/link.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-breadcrumbs-item': OdxBreadcrumbsItem;
-    }
-}
-export declare class OdxBreadcrumbsItem extends CustomElement {
-    private linkElements;
-    fallback: boolean;
-    isLast(): boolean;
-    protected get interactiveElement(): OdxLink | null;
-    protected render(): TemplateResult;
-    protected updated(props: PropertyValues<this>): void;
-}
-//# sourceMappingURL=breadcrumbs-item.d.ts.map

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -1,21 +0,0 @@
-import { CustomElement } from '../../lib/main.js';
-import { PropertyValues, TemplateResult } from 'lit';
-export interface BreadcrumbsItem {
-    href: string;
-    label: string;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-breadcrumbs': OdxBreadcrumbs;
-    }
-}
-export declare class OdxBreadcrumbs extends CustomElement {
-    #private;
-    private itemElements;
-    max: number;
-    items?: BreadcrumbsItem[] | null;
-    protected firstUpdated(props: PropertyValues<this>): void;
-    protected render(): TemplateResult;
-    protected updated(props: PropertyValues<this>): void;
-}
-//# sourceMappingURL=breadcrumbs.d.ts.map

package/dist/components/breadcrumbs/index.d.ts

@@ -1,3 +0,0 @@
-export * from './breadcrumbs.js';
-export * from './breadcrumbs-item.js';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/button/button.d.ts

@@ -1,54 +0,0 @@
-import { InteractiveElement, ValuesOf } from '../../lib/main.js';
-import { TemplateResult } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-button': OdxButton;
-    }
-}
-export type ButtonBadgeAlign = ValuesOf<typeof ButtonBadgeAlign>;
-export declare const ButtonBadgeAlign: {
-    readonly START: "start";
-    readonly CENTER: "center";
-    readonly END: "end";
-};
-export type ButtonSize = ValuesOf<typeof ButtonSize>;
-export declare const ButtonSize: Pick<{
-    readonly XS: "xs";
-    readonly SM: "sm";
-    readonly MD: "md";
-    readonly LG: "lg";
-    readonly XL: "xl";
-    readonly XXL: "xxl";
-}, "XS" | "SM" | "MD" | "LG">;
-export type ButtonVariant = ValuesOf<typeof ButtonVariant>;
-export declare const ButtonVariant: Pick<{
-    readonly NEUTRAL: "neutral";
-    readonly PRIMARY: "primary";
-    readonly ACCENT: "accent";
-    readonly SUCCESS: "success";
-    readonly WARNING: "warning";
-    readonly DANGER: "danger";
-    readonly GHOST: "ghost";
-}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "DANGER" | "GHOST">;
-export declare class OdxButton extends InteractiveElement {
-    #private;
-    /** @internal */
-    static readonly formAssociated = true;
-    alignBadge?: ButtonBadgeAlign;
-    /**
-     * The type of the button.
-     */
-    type: 'button' | 'submit' | 'reset';
-    /**
-     * The size of the button.
-     */
-    size: ButtonSize;
-    /**
-     * The variant of the button.
-     */
-    variant: ButtonVariant;
-    constructor();
-    connectedCallback(): void;
-    protected render(): TemplateResult;
-}
-//# sourceMappingURL=button.d.ts.map

package/dist/components/button-group/button-group.d.ts

@@ -1,20 +0,0 @@
-import { CanBeDisabled, CustomElement } from '../../lib/main.js';
-import { PropertyValues, TemplateResult } from 'lit';
-import { ButtonVariant } from '../button/button.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-button-group': OdxButtonGroup;
-    }
-}
-declare const OdxButtonGroup_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
-export declare class OdxButtonGroup extends OdxButtonGroup_base {
-    #private;
-    private buttons;
-    block: boolean;
-    vertical: boolean;
-    variant?: ButtonVariant;
-    protected render(): TemplateResult;
-    protected updated(props: PropertyValues<this>): void;
-}
-export {};
-//# sourceMappingURL=button-group.d.ts.map

package/dist/components/card/card.d.ts

@@ -1,15 +0,0 @@
-import { CanBeDisabled, CustomElement } from '../../lib/main.js';
-import { PropertyValues, TemplateResult } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-card': OdxCard;
-    }
-}
-declare const OdxCard_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
-export declare class OdxCard extends OdxCard_base {
-    interactive: boolean;
-    protected updated(_changedProperties: PropertyValues): void;
-    protected render(): TemplateResult;
-}
-export {};
-//# sourceMappingURL=card.d.ts.map

package/dist/components/checkbox/checkbox.d.ts

@@ -1,14 +0,0 @@
-import { CheckboxFormControl } from '../../lib/main.js';
-import { PropertyValues, TemplateResult } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-checkbox': OdxCheckbox;
-    }
-}
-export declare class OdxCheckbox extends CheckboxFormControl {
-    indeterminate: boolean;
-    protected render(): TemplateResult;
-    protected willUpdate(props: PropertyValues<this>): void;
-    toggle(state?: boolean, dispatchEvent?: boolean): void;
-}
-//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox-group/checkbox-group.d.ts

@@ -1,19 +0,0 @@
-import { ValuesOf, CheckboxGroupFormControl } from '../../lib/main.js';
-import { TemplateResult } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-checkbox-group': OdxCheckboxGroup;
-    }
-}
-export type CheckboxGroupLayout = ValuesOf<typeof CheckboxGroupLayout>;
-export declare const CheckboxGroupLayout: {
-    readonly VERTICAL: "vertical";
-    readonly HORIZONTAL: "horizontal";
-    readonly LIST: "list";
-};
-export declare class OdxCheckboxGroup extends CheckboxGroupFormControl {
-    #private;
-    layout: CheckboxGroupLayout;
-    protected render(): TemplateResult;
-}
-//# sourceMappingURL=checkbox-group.d.ts.map

package/dist/components/chip/chip.d.ts

@@ -1,31 +0,0 @@
-import { CanBeDisabled, CustomElement, ValuesOf } from '../../lib/main.js';
-import { PropertyValues, TemplateResult } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-chip': OdxChip;
-    }
-}
-export type ChipVariant = ValuesOf<typeof ChipVariant>;
-export declare const ChipVariant: Pick<{
-    readonly NEUTRAL: "neutral";
-    readonly PRIMARY: "primary";
-    readonly ACCENT: "accent";
-    readonly SUCCESS: "success";
-    readonly WARNING: "warning";
-    readonly DANGER: "danger";
-    readonly GHOST: "ghost";
-}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
-declare const OdxChip_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
-export declare class OdxChip extends OdxChip_base {
-    #private;
-    protected actionElement?: HTMLElement;
-    removable: boolean;
-    interactive: boolean;
-    variant: ChipVariant;
-    protected render(): TemplateResult;
-    protected renderAction(): TemplateResult;
-    protected willUpdate(props: PropertyValues<this>): void;
-    protected updated(props: PropertyValues<this>): void;
-}
-export {};
-//# sourceMappingURL=chip.d.ts.map