@odx/foundation 1.0.0-beta.65 → 1.0.0-beta.66
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.
- package/README.md +2 -2
- package/dist/components.js +1 -1
- package/dist/main.js +1 -1
- package/dist/styles.css +1 -1
- package/package.json +11 -12
package/README.md
CHANGED
|
@@ -16,10 +16,10 @@ The `@odx/foundation` package is a core part of the ODX Design System, providing
|
|
|
16
16
|
[<img alt="NPM Version (with dist tag)" src="https://img.shields.io/npm/v/%40odx%2Ffoundation/latest?style=flat-square">](https://npmjs.org/package/@odx/foundation)
|
|
17
17
|
|
|
18
18
|
|
|
19
|
-
To install `@odx/foundation` in your project, run the following command:
|
|
19
|
+
To install `@odx/foundation` and it's peer dependencies in your project, run the following command:
|
|
20
20
|
|
|
21
21
|
```bash
|
|
22
|
-
npm install @odx/foundation @odx/icons@next --save
|
|
22
|
+
npm install @odx/design-tokens @odx/foundation @odx/icons@next --save
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
> We depend on the <a href="https://lit.dev" target="_blank" rel="noopener">**Lit package**</a> for building web elements because it offers a lightweight, efficient framework with a simple syntax for creating fast, reusable elements. Its powerful templating system ensures high performance and seamless user experience. Lit is also highly interoperable, making it easy to integrate with other frameworks and libraries.
|
package/dist/components.js
CHANGED
|
@@ -103,7 +103,7 @@ __decorateClass([
|
|
|
103
103
|
], _OdxAccordionPanel.prototype, "hidden", 2);
|
|
104
104
|
let OdxAccordionPanel = _OdxAccordionPanel;
|
|
105
105
|
|
|
106
|
-
const styles$1b = "@layer base{:host{--_padding-inline: var(--odx-size-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px))}:host,[part=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset);font-weight:var(--odx-typography-font-weight-medium)}[part=label]{flex:initial}::slotted(odx-avatar){--_color-foreground: inherit}}@layer variant{:host([size=\"xs\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);::slotted(odx-avatar){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}[part~=base]{outline-offset:0}}:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-size-25) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-150);::slotted(odx-avatar){--_size: var(--odx-size-175);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-25) + var(--odx-size-px))}[part~=base]{outline-offset:0}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);::slotted(odx-avatar){--_size: var(--odx-size-250);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-background-pressed: var(--odx-color-background-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-background-pressed: var(--odx-color-background-accent-pressed);--_color-foreground: var(--odx-color-foreground-
|
|
106
|
+
const styles$1b = "@layer base{:host{--_padding-inline: var(--odx-size-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px))}:host,[part=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset);font-weight:var(--odx-typography-font-weight-medium)}[part=label]{flex:initial}::slotted(odx-avatar){--_color-foreground: inherit}}@layer variant{:host([size=\"xs\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);::slotted(odx-avatar){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}[part~=base]{outline-offset:0}}:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-size-25) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-150);::slotted(odx-avatar){--_size: var(--odx-size-175);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-25) + var(--odx-size-px))}[part~=base]{outline-offset:0}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);::slotted(odx-avatar){--_size: var(--odx-size-250);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-background-pressed: var(--odx-color-background-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-background-pressed: var(--odx-color-background-accent-pressed);--_color-foreground: var(--odx-color-foreground-rest-static);font-weight:var(--odx-typography-font-weight-semibold)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-background-danger-hover);--_color-background-pressed: var(--odx-color-background-danger-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"ghost\"]){--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed)}:host([loading]){--_color-background: var(--odx-color-background-neutral-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle)}:host([variant=\"primary\"][loading]){--_color-background: var(--odx-color-background-primary-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle) }:host([variant=\"accent\"][loading]){--_color-background: var(--odx-color-background-accent-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle) }:host([variant=\"danger\"][loading]){--_color-background: var(--odx-color-background-danger-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle) }:host([variant=\"ghost\"][loading]){--_color-background: var(--odx-color-background-transparent-rest)}}";
|
|
107
107
|
|
|
108
108
|
const ButtonBadgeAlign = { START: "start", CENTER: "center", END: "end" };
|
|
109
109
|
const ButtonSize = pick(Size, ["XS", "SM", "MD", "LG"]);
|
package/dist/main.js
CHANGED
|
@@ -3,7 +3,7 @@ import { unsafeCSS, LitElement, html, isServer, nothing } from 'lit';
|
|
|
3
3
|
import { property, queryAssignedElements, query } from 'lit/decorators.js';
|
|
4
4
|
import { u as uniqBy, r as round, R as RovingTabindexController, m as minBy, c as computePosition, a as autoUpdate, t as throttle, o as offset, s as shift, f as flip, b as size, d as arrow, h as hide } from './vendor.js';
|
|
5
5
|
|
|
6
|
-
const customElementStyles = "@layer reset,base,variant,state;@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-stack{display:block}.odx-stack{
|
|
6
|
+
const customElementStyles = "@layer reset,base,variant,state;@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-stack{display:block}.odx-stack{--flow: column;display:flex;flex-flow:var(--flow);gap:var(--odx-size-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:start;&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}}}@layer base{.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}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@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}[indicator-position=start] odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}[indicator-position=start] odx-accordion-item[expanded]::part(indicator){--rotate: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
|
|
7
7
|
|
|
8
8
|
function customElement(tagName, ...styles) {
|
|
9
9
|
return (target) => {
|
package/dist/styles.css
CHANGED
|
@@ -1 +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-stack{display:block}.odx-stack{
|
|
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-stack{display:block}.odx-stack{--flow: column;display:flex;flex-flow:var(--flow);gap:var(--odx-size-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:start;&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}}}@layer base{.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}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@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}[indicator-position=start] odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}[indicator-position=start] 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;line-height:var(--_line-height);font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold)}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}}@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)}}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@odx/foundation",
|
|
3
3
|
"description": "A library of Web Component building blocks for ODX",
|
|
4
|
-
"version": "1.0.0-beta.
|
|
4
|
+
"version": "1.0.0-beta.66",
|
|
5
5
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
7
7
|
"homepage": "https://odx.draeger.com",
|
|
@@ -14,13 +14,6 @@
|
|
|
14
14
|
"custom-elements.json"
|
|
15
15
|
],
|
|
16
16
|
"type": "module",
|
|
17
|
-
"scripts": {
|
|
18
|
-
"build": "vite build",
|
|
19
|
-
"dev:tsc": "tsc --build --noEmit --watch",
|
|
20
|
-
"dev": "vite build --watch --mode=development",
|
|
21
|
-
"lint": "biome lint lib i18n styles components",
|
|
22
|
-
"generate:manifest": "cem analyze"
|
|
23
|
-
},
|
|
24
17
|
"dependencies": {
|
|
25
18
|
"@preact/signals-core": "1.8.0",
|
|
26
19
|
"lit": "3.3.0"
|
|
@@ -35,8 +28,6 @@
|
|
|
35
28
|
"@lit-labs/preact-signals": "1.0.3",
|
|
36
29
|
"@lit/context": "1.1.5",
|
|
37
30
|
"@odx/icons": "4.0.0-rc.29",
|
|
38
|
-
"@odx/storybook-utils": "workspace:*",
|
|
39
|
-
"@odx/typescript-config": "workspace:*",
|
|
40
31
|
"@spectrum-web-components/reactive-controllers": "1.6.0",
|
|
41
32
|
"@wc-toolkit/cem-inheritance": "1.0.4",
|
|
42
33
|
"@wc-toolkit/cem-validator": "1.0.3",
|
|
@@ -49,7 +40,8 @@
|
|
|
49
40
|
"ts-lit-plugin": "2.0.2",
|
|
50
41
|
"vite": "6.3.5",
|
|
51
42
|
"vite-plugin-dts": "4.5.3",
|
|
52
|
-
"
|
|
43
|
+
"@odx/storybook-utils": "0.0.0",
|
|
44
|
+
"@odx/typescript-config": "0.0.0"
|
|
53
45
|
},
|
|
54
46
|
"sideEffects": [
|
|
55
47
|
"dist/i18n.js",
|
|
@@ -81,5 +73,12 @@
|
|
|
81
73
|
"publishConfig": {
|
|
82
74
|
"access": "public",
|
|
83
75
|
"tag": "latest"
|
|
76
|
+
},
|
|
77
|
+
"scripts": {
|
|
78
|
+
"build": "vite build",
|
|
79
|
+
"dev:tsc": "tsc --build --noEmit --watch",
|
|
80
|
+
"dev": "vite build --watch --mode=development",
|
|
81
|
+
"lint": "biome lint lib i18n styles components",
|
|
82
|
+
"generate:manifest": "cem analyze"
|
|
84
83
|
}
|
|
85
|
-
}
|
|
84
|
+
}
|