@odx/foundation 1.0.0-rc.0 → 1.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/lib/theming.d.ts +0 -2
  3. package/dist/lib/theming.js +9 -10
  4. package/dist/styles.css +1 -1
  5. package/package.json +6 -4
package/CHANGELOG.md CHANGED
@@ -1,3 +1,19 @@
1
+ ## 1.0.0-rc.2
2
+
3
+ ### Bug Fixes
4
+
5
+ - Fix default text alignment of title elements
6
+
7
+
8
+ ## 1.0.0-rc.1
9
+
10
+ ### Bug Fixes
11
+
12
+ - Fix `html.odx-root` selector not applying reset styles to `<body>` element
13
+ - Fix `toggleDarkMode` function never enabling light mode due to incorrect mode detection logic
14
+ - Fix `attachDarkModeToggle` icon not updating correctly when toggling dark mode
15
+ - Add side effects to `@odx/foundation` package to ensure theming and localization modules are included in the bundle when using tree shaking
16
+
1
17
  ## 1.0.0-rc.0
2
18
 
3
19
  ### Major Changes
package/dist/lib/theming.d.ts CHANGED
@@ -1,7 +1,5 @@
1
1
  import { ThemeConfig } from '@odx/design-tokens';
2
- import { ReadonlySignal } from './signals.js';
3
2
  declare global {
4
- var odxDarkModeEnabled: ReadonlySignal<boolean> | undefined;
5
3
  var __ODX_THEME_ROOT__: HTMLElement;
6
4
  }
7
5
  export declare const userPrefersDarkMode: boolean;
package/dist/lib/theming.js CHANGED
@@ -4,12 +4,13 @@ import { sharedSignal, effect } from './signals.js';
4
4
  const { matches: userPrefersDarkMode = false } = globalThis.matchMedia?.("(prefers-color-scheme: dark)") ?? {};
5
5
  const darkModeIcon = "core::night-mode";
6
6
  const lightModeIcon = "core::brightness";
7
- const hasDarkModeClass = document.documentElement.classList.contains(darkModeClass);
8
- const hasLightModeClass = document.documentElement.classList.contains(lightModeClass);
7
+ globalThis.__ODX_THEME_ROOT__ ??= document.querySelector(".odx-root") ?? document.documentElement;
8
+ const hasDarkModeClass = globalThis.__ODX_THEME_ROOT__.classList.contains(darkModeClass);
9
+ const hasLightModeClass = globalThis.__ODX_THEME_ROOT__.classList.contains(lightModeClass);
9
10
  const darkModeEnabled = sharedSignal("darkModeEnabled", hasDarkModeClass || hasLightModeClass ? hasDarkModeClass : userPrefersDarkMode);
10
- globalThis.__ODX_THEME_ROOT__ ??= document.documentElement;
11
11
  function setTheme(config, root = globalThis.__ODX_THEME_ROOT__) {
12
12
  setTheme$1(config, root);
13
+ if (!config.mode) return;
13
14
  if (config.mode === "auto") {
14
15
  darkModeEnabled.set(userPrefersDarkMode);
15
16
  } else {
@@ -20,18 +21,16 @@ function isDarkModeEnabled() {
20
21
  return darkModeEnabled.get();
21
22
  }
22
23
  function toggleDarkMode(enabled, root = globalThis.__ODX_THEME_ROOT__) {
23
- if (enabled === "auto") {
24
- setTheme({ mode: enabled }, root);
25
- } else {
26
- setTheme({ mode: enabled ? "dark" : "light" }, root);
27
- }
24
+ enabled ||= !isDarkModeEnabled();
25
+ setTheme({ mode: enabled === "auto" ? enabled : enabled ? "dark" : "light" }, root);
28
26
  }
29
27
  function attachDarkModeToggle(host, options = {}) {
30
28
  host.addEventListener("click", () => toggleDarkMode(void 0, options.root));
31
29
  return effect(() => {
32
30
  const darkModeEnabled2 = isDarkModeEnabled();
33
- host.setAttribute("icon", darkModeEnabled2 ? darkModeIcon : lightModeIcon);
34
- options.update?.(host, darkModeEnabled2, darkModeEnabled2 ? darkModeIcon : lightModeIcon);
31
+ const icon = darkModeEnabled2 ? lightModeIcon : darkModeIcon;
32
+ host.setAttribute("icon", icon);
33
+ options.update?.(host, darkModeEnabled2, icon);
35
34
  });
36
35
  }
37
36
 
package/dist/styles.css CHANGED
@@ -1 +1 @@
1
- @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)}}
1
+ @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){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)}& body{margin:0;padding:0}}}@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 CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@odx/foundation",
3
3
  "displayName": "ODX Design System Foundation",
4
4
  "description": "The design foundation of the ODX Design System, providing base styles and utilities",
5
- "version": "1.0.0-rc.0",
5
+ "version": "1.0.0-rc.2",
6
6
  "author": "Drägerwerk AG & Co.KGaA",
7
7
  "license": "SEE LICENSE IN LICENSE",
8
8
  "homepage": "https://odx.draeger.com",
@@ -25,13 +25,15 @@
25
25
  "lit": "3.3.2",
26
26
  "stylelint": "17.3.0",
27
27
  "vitest": "4.0.18",
28
- "@odx-internal/utils-storybook": "0.0.0",
29
- "@odx-internal/config-vite": "0.0.0",
30
28
  "@odx-internal/config-stylelint": "0.0.0",
31
- "@odx-internal/config-typescript": "0.0.0"
29
+ "@odx-internal/config-typescript": "0.0.0",
30
+ "@odx-internal/config-vite": "0.0.0",
31
+ "@odx-internal/utils-storybook": "0.0.0"
32
32
  },
33
33
  "style": "./dist/styles.css",
34
34
  "sideEffects": [
35
+ "./dist/lib/theming.js",
36
+ "./dist/lib/localization.js",
35
37
  "./**/*.css"
36
38
  ],
37
39
  "exports": {