@vandeurenglenn/lite-elements 0.3.18

package/exports/typography.js

@@ -0,0 +1,206 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+
+let CustomTypography = (() => {
+    let _classDecorators = [customElement('custom-typography')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    let _type_decorators;
+    let _type_initializers = [];
+    let _type_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _type_decorators = [property({ type: String, reflect: true })];
+            _size_decorators = [property({ type: String, reflect: true })];
+            __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
+            __esDecorate(this, null, _size_decorators, { kind: "accessor", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #type_accessor_storage = __runInitializers(this, _type_initializers, 'title');
+        get type() { return this.#type_accessor_storage; }
+        set type(value) { this.#type_accessor_storage = value; }
+        #size_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _size_initializers, 'large'));
+        get size() { return this.#size_accessor_storage; }
+        set size(value) { this.#size_accessor_storage = value; }
+        static styles = [
+            css `
+      :host {
+        display: contents;
+      }
+
+      :host([type='display'][size='large']) slot {
+        font-family: var(--md-sys-typescale-display-large-font-family-name);
+        font-style: var(--md-sys-typescale-display-large-font-family-style);
+        font-weight: var(--md-sys-typescale-display-large-font-weight);
+        font-size: var(--md-sys-typescale-display-large-font-size);
+        letter-spacing: var(--md-sys-typescale-display-large-tracking);
+        line-height: var(--md-sys-typescale-display-large-height);
+        text-transform: var(--md-sys-typescale-display-large-text-transform);
+        text-decoration: var(--md-sys-typescale-display-large-text-decoration);
+      }
+      :host([type='display'][size='medium']) slot {
+        font-family: var(--md-sys-typescale-display-medium-font-family-name);
+        font-style: var(--md-sys-typescale-display-medium-font-family-style);
+        font-weight: var(--md-sys-typescale-display-medium-font-weight);
+        font-size: var(--md-sys-typescale-display-medium-font-size);
+        letter-spacing: var(--md-sys-typescale-display-medium-tracking);
+        line-height: var(--md-sys-typescale-display-medium-height);
+        text-transform: var(--md-sys-typescale-display-medium-text-transform);
+        text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
+      }
+      :host([type='display'][size='small']) slot {
+        font-family: var(--md-sys-typescale-display-small-font-family-name);
+        font-style: var(--md-sys-typescale-display-small-font-family-style);
+        font-weight: var(--md-sys-typescale-display-small-font-weight);
+        font-size: var(--md-sys-typescale-display-small-font-size);
+        letter-spacing: var(--md-sys-typescale-display-small-tracking);
+        line-height: var(--md-sys-typescale-display-small-height);
+        text-transform: var(--md-sys-typescale-display-small-text-transform);
+        text-decoration: var(--md-sys-typescale-display-small-text-decoration);
+      }
+      :host([type='headline'][size='large']) slot {
+        font-family: var(--md-sys-typescale-headline-large-font-family-name);
+        font-style: var(--md-sys-typescale-headline-large-font-family-style);
+        font-weight: var(--md-sys-typescale-headline-large-font-weight);
+        font-size: var(--md-sys-typescale-headline-large-font-size);
+        letter-spacing: var(--md-sys-typescale-headline-large-tracking);
+        line-height: var(--md-sys-typescale-headline-large-height);
+        text-transform: var(--md-sys-typescale-headline-large-text-transform);
+        text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
+      }
+      :host([type='headline'][size='medium']) slot {
+        font-family: var(--md-sys-typescale-headline-medium-font-family-name);
+        font-style: var(--md-sys-typescale-headline-medium-font-family-style);
+        font-weight: var(--md-sys-typescale-headline-medium-font-weight);
+        font-size: var(--md-sys-typescale-headline-medium-font-size);
+        letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
+        line-height: var(--md-sys-typescale-headline-medium-height);
+        text-transform: var(--md-sys-typescale-headline-medium-text-transform);
+        text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
+      }
+      :host([type='headline'][size='small']) slot {
+        font-family: var(--md-sys-typescale-headline-small-font-family-name);
+        font-style: var(--md-sys-typescale-headline-small-font-family-style);
+        font-weight: var(--md-sys-typescale-headline-small-font-weight);
+        font-size: var(--md-sys-typescale-headline-small-font-size);
+        letter-spacing: var(--md-sys-typescale-headline-small-tracking);
+        line-height: var(--md-sys-typescale-headline-small-height);
+        text-transform: var(--md-sys-typescale-headline-small-text-transform);
+        text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
+      }
+      :host([type='body'][size='large']) slot {
+        font-family: var(--md-sys-typescale-body-large-font-family-name);
+        font-style: var(--md-sys-typescale-body-large-font-family-style);
+        font-weight: var(--md-sys-typescale-body-large-font-weight);
+        font-size: var(--md-sys-typescale-body-large-font-size);
+        letter-spacing: var(--md-sys-typescale-body-large-tracking);
+        line-height: var(--md-sys-typescale-body-large-height);
+        text-transform: var(--md-sys-typescale-body-large-text-transform);
+        text-decoration: var(--md-sys-typescale-body-large-text-decoration);
+      }
+      :host([type='body'][size='medium']) slot {
+        font-family: var(--md-sys-typescale-body-medium-font-family-name);
+        font-style: var(--md-sys-typescale-body-medium-font-family-style);
+        font-weight: var(--md-sys-typescale-body-medium-font-weight);
+        font-size: var(--md-sys-typescale-body-medium-font-size);
+        letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+        line-height: var(--md-sys-typescale-body-medium-height);
+        text-transform: var(--md-sys-typescale-body-medium-text-transform);
+        text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
+      }
+      :host([type='body'][size='small']) slot {
+        font-family: var(--md-sys-typescale-body-small-font-family-name);
+        font-style: var(--md-sys-typescale-body-small-font-family-style);
+        font-weight: var(--md-sys-typescale-body-small-font-weight);
+        font-size: var(--md-sys-typescale-body-small-font-size);
+        letter-spacing: var(--md-sys-typescale-body-small-tracking);
+        line-height: var(--md-sys-typescale-body-small-height);
+        text-transform: var(--md-sys-typescale-body-small-text-transform);
+        text-decoration: var(--md-sys-typescale-body-small-text-decoration);
+      }
+      :host([type='label'][size='large']) slot {
+        font-family: var(--md-sys-typescale-label-large-font-family-name);
+        font-style: var(--md-sys-typescale-label-large-font-family-style);
+        font-weight: var(--md-sys-typescale-label-large-font-weight);
+        font-size: var(--md-sys-typescale-label-large-font-size);
+        letter-spacing: var(--md-sys-typescale-label-large-tracking);
+        line-height: var(--md-sys-typescale-label-large-height);
+        text-transform: var(--md-sys-typescale-label-large-text-transform);
+        text-decoration: var(--md-sys-typescale-label-large-text-decoration);
+      }
+      :host([type='label'][size='medium']) slot {
+        font-family: var(--md-sys-typescale-label-medium-font-family-name);
+        font-style: var(--md-sys-typescale-label-medium-font-family-style);
+        font-weight: var(--md-sys-typescale-label-medium-font-weight);
+        font-size: var(--md-sys-typescale-label-medium-font-size);
+        letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+        line-height: var(--md-sys-typescale-label-medium-height);
+        text-transform: var(--md-sys-typescale-label-medium-text-transform);
+        text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
+      }
+      :host([type='label'][size='small']) slot {
+        font-family: var(--md-sys-typescale-label-small-font-family-name);
+        font-style: var(--md-sys-typescale-label-small-font-family-style);
+        font-weight: var(--md-sys-typescale-label-small-font-weight);
+        font-size: var(--md-sys-typescale-label-small-font-size);
+        letter-spacing: var(--md-sys-typescale-label-small-tracking);
+        line-height: var(--md-sys-typescale-label-small-height);
+        text-transform: var(--md-sys-typescale-label-small-text-transform);
+        text-decoration: var(--md-sys-typescale-label-small-text-decoration);
+      }
+      :host([type='title'][size='large']) slot {
+        font-family: var(--md-sys-typescale-title-large-font-family-name);
+        font-style: var(--md-sys-typescale-title-large-font-family-style);
+        font-weight: var(--md-sys-typescale-title-large-font-weight);
+        font-size: var(--md-sys-typescale-title-large-font-size);
+        letter-spacing: var(--md-sys-typescale-title-large-tracking);
+        line-height: var(--md-sys-typescale-title-large-height);
+        text-transform: var(--md-sys-typescale-title-large-text-transform);
+        text-decoration: var(--md-sys-typescale-title-large-text-decoration);
+      }
+      :host([type='title'][size='medium']) slot {
+        font-family: var(--md-sys-typescale-title-medium-font-family-name);
+        font-style: var(--md-sys-typescale-title-medium-font-family-style);
+        font-weight: var(--md-sys-typescale-title-medium-font-weight);
+        font-size: var(--md-sys-typescale-title-medium-font-size);
+        letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+        line-height: var(--md-sys-typescale-title-medium-height);
+        text-transform: var(--md-sys-typescale-title-medium-text-transform);
+        text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
+      }
+      :host([type='title'][size='small']) slot {
+        font-family: var(--md-sys-typescale-title-small-font-family-name);
+        font-style: var(--md-sys-typescale-title-small-font-family-style);
+        font-weight: var(--md-sys-typescale-title-small-font-weight);
+        font-size: var(--md-sys-typescale-title-small-font-size);
+        letter-spacing: var(--md-sys-typescale-title-small-tracking);
+        line-height: var(--md-sys-typescale-title-small-height);
+        text-transform: var(--md-sys-typescale-title-small-text-transform);
+        text-decoration: var(--md-sys-typescale-title-small-text-decoration);
+      }
+    `
+        ];
+        render() {
+            return html ` <slot></slot> `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _size_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomTypography };

package/package.json

@@ -0,0 +1,256 @@
+{
+	"name": "@vandeurenglenn/lite-elements",
+	"version": "0.3.18",
+	"description": "set of lite elements following Material Design 3 spec",
+	"type": "module",
+	"scripts": {
+		"watch": "rollup -c -w",
+		"build": "rollup -c",
+		"serve": "jsproject --serve ./exports/bundle --port 8888",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"files": [
+		"./exports",
+		"LICENSE"
+	],
+	"keywords": [],
+	"author": "",
+	"license": "MIT",
+	"dependencies": {
+		"@lit-labs/context": "^0.3.3",
+		"@material-design-icons/svg": "^0.14.10",
+		"@material-symbols/svg-400": "^0.10.2",
+		"@material/web": "^1.0.0-pre.10",
+		"@vandeurenglenn/flex-elements": "^1.1.1",
+		"@vandeurenglenn/lite": "^0.2.25",
+		"lit": "^2.8.0",
+		"scoped-pubsub": "^1.0.3"
+	},
+	"devDependencies": {
+		"@rollup/plugin-commonjs": "^25.0.2",
+		"@rollup/plugin-json": "^6.0.0",
+		"@rollup/plugin-node-resolve": "^15.1.0",
+		"@rollup/plugin-terser": "^0.4.3",
+		"@rollup/plugin-typescript": "^11.1.1",
+		"@types/html": "^1.0.1",
+		"@types/node": "^20.3.0",
+		"@web/rollup-plugin-html": "^2.0.0",
+		"chrome-launcher": "^1.0.0",
+		"custom-element-decorator": "^0.6.0",
+		"globby": "^13.1.4",
+		"lighthouse": "^10.4.0",
+		"material-symbols": "^0.10.1",
+		"rimraf": "^5.0.1",
+		"rollup": "^3.24.1",
+		"rollup-plugin-auto-exports": "^1.0.0",
+		"rollup-plugin-material-symbols": "^2.1.0",
+		"tslib": "^2.5.3",
+		"typescript": "^5.1.3"
+	},
+	"exports": {
+		".": {
+			"import": "./exports/lit-elements.js",
+			"types": "./exports/lit-elements.d.ts"
+		},
+		"./banner": {
+			"import": "./exports/banner.js",
+			"types": "./exports/banner/banner.d.ts"
+		},
+		"./banner.js": {
+			"import": "./exports/banner.js",
+			"types": "./exports/banner/banner.d.ts"
+		},
+		"./card": {
+			"import": "./exports/card.js",
+			"types": "./exports/card/card.d.ts"
+		},
+		"./card.js": {
+			"import": "./exports/card.js",
+			"types": "./exports/card/card.d.ts"
+		},
+		"./demo-elements": {
+			"import": "./exports/demo-elements.js",
+			"types": "./exports/demo-elements.d.ts"
+		},
+		"./demo-elements.js": {
+			"import": "./exports/demo-elements.js",
+			"types": "./exports/demo-elements.d.ts"
+		},
+		"./dial": {
+			"import": "./exports/dial.js",
+			"types": "./exports/time-picker/dial.d.ts"
+		},
+		"./dial.js": {
+			"import": "./exports/dial.js",
+			"types": "./exports/time-picker/dial.d.ts"
+		},
+		"./divider": {
+			"import": "./exports/divider.js",
+			"types": "./exports/divider/divider.d.ts"
+		},
+		"./divider.js": {
+			"import": "./exports/divider.js",
+			"types": "./exports/divider/divider.d.ts"
+		},
+		"./drawer-layout": {
+			"import": "./exports/drawer-layout.js",
+			"types": "./exports/drawer/drawer-layout.d.ts"
+		},
+		"./drawer-layout.js": {
+			"import": "./exports/drawer-layout.js",
+			"types": "./exports/drawer/drawer-layout.d.ts"
+		},
+		"./drawer": {
+			"import": "./exports/drawer.js",
+			"types": "./exports/drawer/drawer.d.ts"
+		},
+		"./drawer.js": {
+			"import": "./exports/drawer.js",
+			"types": "./exports/drawer/drawer.d.ts"
+		},
+		"./elements": {
+			"import": "./exports/elements.js",
+			"types": "./exports/elements.d.ts"
+		},
+		"./elements.js": {
+			"import": "./exports/elements.js",
+			"types": "./exports/elements.d.ts"
+		},
+		"./elevation": {
+			"import": "./exports/elevation.js",
+			"types": "./exports/elevation/elevation.d.ts"
+		},
+		"./elevation.js": {
+			"import": "./exports/elevation.js",
+			"types": "./exports/elevation/elevation.d.ts"
+		},
+		"./hour-field": {
+			"import": "./exports/hour-field.js",
+			"types": "./exports/time-picker/hour-field.d.ts"
+		},
+		"./hour-field.js": {
+			"import": "./exports/hour-field.js",
+			"types": "./exports/time-picker/hour-field.d.ts"
+		},
+		"./list": {
+			"import": "./exports/list.js",
+			"types": "./exports/list/list.d.ts"
+		},
+		"./list.js": {
+			"import": "./exports/list.js",
+			"types": "./exports/list/list.d.ts"
+		},
+		"./menu": {
+			"import": "./exports/menu.js",
+			"types": "./exports/tabs/menu.d.ts"
+		},
+		"./menu.js": {
+			"import": "./exports/menu.js",
+			"types": "./exports/tabs/menu.d.ts"
+		},
+		"./pane": {
+			"import": "./exports/pane.js",
+			"types": "./exports/pane/pane.d.ts"
+		},
+		"./pane.js": {
+			"import": "./exports/pane.js",
+			"types": "./exports/pane/pane.d.ts"
+		},
+		"./rail": {
+			"import": "./exports/rail.js",
+			"types": "./exports/rail/rail.d.ts"
+		},
+		"./rail.js": {
+			"import": "./exports/rail.js",
+			"types": "./exports/rail/rail.d.ts"
+		},
+		"./scroll-mixin": {
+			"import": "./exports/scroll-mixin.js",
+			"types": "./exports/mixins/scroll-mixin.d.ts"
+		},
+		"./scroll-mixin.js": {
+			"import": "./exports/scroll-mixin.js",
+			"types": "./exports/mixins/scroll-mixin.d.ts"
+		},
+		"./select-mixin": {
+			"import": "./exports/select-mixin.js",
+			"types": "./exports/mixins/select-mixin.d.ts"
+		},
+		"./select-mixin.js": {
+			"import": "./exports/select-mixin.js",
+			"types": "./exports/mixins/select-mixin.d.ts"
+		},
+		"./selector-mixin": {
+			"import": "./exports/selector-mixin.js",
+			"types": "./exports/mixins/selector-mixin.d.ts"
+		},
+		"./selector-mixin.js": {
+			"import": "./exports/selector-mixin.js",
+			"types": "./exports/mixins/selector-mixin.d.ts"
+		},
+		"./supporting-pane": {
+			"import": "./exports/supporting-pane.js",
+			"types": "./exports/supporting-pane/supporting-pane.d.ts"
+		},
+		"./supporting-pane.js": {
+			"import": "./exports/supporting-pane.js",
+			"types": "./exports/supporting-pane/supporting-pane.d.ts"
+		},
+		"./tab": {
+			"import": "./exports/tab.js",
+			"types": "./exports/tabs/tab.d.ts"
+		},
+		"./tab.js": {
+			"import": "./exports/tab.js",
+			"types": "./exports/tabs/tab.d.ts"
+		},
+		"./tabs": {
+			"import": "./exports/tabs.js",
+			"types": "./exports/tabs/tabs.d.ts"
+		},
+		"./tabs.js": {
+			"import": "./exports/tabs.js",
+			"types": "./exports/tabs/tabs.d.ts"
+		},
+		"./theme": {
+			"import": "./exports/theme.js",
+			"types": "./exports/theme/theme.d.ts"
+		},
+		"./theme.js": {
+			"import": "./exports/theme.js",
+			"types": "./exports/theme/theme.d.ts"
+		},
+		"./title": {
+			"import": "./exports/title.js",
+			"types": "./exports/typography/title.d.ts"
+		},
+		"./title.js": {
+			"import": "./exports/title.js",
+			"types": "./exports/typography/title.d.ts"
+		},
+		"./toggle-button": {
+			"import": "./exports/toggle-button.js",
+			"types": "./exports/toggle/toggle-button.d.ts"
+		},
+		"./toggle-button.js": {
+			"import": "./exports/toggle-button.js",
+			"types": "./exports/toggle/toggle-button.d.ts"
+		},
+		"./types": {
+			"import": "./exports/types.js",
+			"types": "./exports/types.d.ts"
+		},
+		"./types.js": {
+			"import": "./exports/types.js",
+			"types": "./exports/types.d.ts"
+		},
+		"./drawer-button": {
+			"import": "./exports/drawer-button.js",
+			"types": "./exports/drawer/drawer-button.d.ts"
+		},
+		"./drawer-button.js": {
+			"import": "./exports/drawer-button.js",
+			"types": "./exports/drawer/drawer-button.d.ts"
+		}
+	}
+}