@vandeurenglenn/lite-elements 0.3.67 → 0.3.69

package/exports/icon-button.js

@@ -1,8 +1,9 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
-import './button.js';
+import { customElement, property, css, html } from '@vandeurenglenn/lite';
+import { CustomButton } from './button.js';
 import './icon.js';
 import './elevation.js';
+import './button.css.js';
 import '@vandeurenglenn/little-pubsub';
 
 let CustomIconButton = (() => {
@@ -10,7 +11,7 @@ let CustomIconButton = (() => {
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
-    let _classSuper = LiteElement;
+    let _classSuper = CustomButton;
     let _icon_decorators;
     let _icon_initializers = [];
     let _icon_extraInitializers = [];
@@ -28,67 +29,54 @@ let CustomIconButton = (() => {
         get icon() { return this.#icon_accessor_storage; }
         set icon(value) { this.#icon_accessor_storage = value; }
         static styles = [
+            ...CustomButton.styles,
             css `
       :host {
         --custom-button-border-radius: var(--md-sys-shape-corner-medium);
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: var(--custom-button-border-radius);
         width: 40px;
         height: 40px;
-        cursor: pointer;
-      }
-
-      .hover,
-      custom-icon,
-      custom-elevation {
-        pointer-events: none;
-      }
-
-      .hover {
-        position: absolute;
-        inset: 0;
-        background-color: var(--md-sys-color-primary);
-        opacity: 0;
-        transition: opacity 200ms;
-        border-radius: var(--custom-button-border-radius);
+        align-items: center;
+        justify-content: center;
       }
 
-      :host(:focus) .hover,
-      :host(:hover) .hover {
-        opacity: 0.1;
+      :host([type='text']) {
+        --custom-icon-color: var(--md-sys-color-on-surface);
       }
 
-      :host(:active) .hover {
-        opacity: 0.2;
+      :host([type='filled']),
+      :host([type='filled']) ::slotted(*) {
+        --custom-icon-color: var(--md-sys-color-on-primary);
       }
 
-      custom-elevation {
-        --md-elevation-level: var(--elevation-level);
+      :host([type='outlined']),
+      :host([type='outlined']) ::slotted(*) {
+        --custom-icon-color: var(--md-sys-color-on-surface);
       }
 
-      :host([type='elevated']) custom-elevation {
-        --elevation-level: 1;
+      :host([type='elevated']),
+      :host([type='elevated']) ::slotted(*) {
+        --custom-icon-color: var(--md-sys-color-primary);
       }
 
-      :host(:active) {
-        --elevation-level: 0;
+      :host([type='tertiary']),
+      :host([type='tertiary']) ::slotted(*) {
+        --custom-icon-color: var(--md-sys-color-on-tertiary);
       }
 
-      custom-icon {
-        --custom-icon-color: var(--md-sys-color-on-surface);
+      :host([type='tonal']),
+      :host([type='tonal']) ::slotted(*) {
+        --custom-icon-color: var(--md-sys-color-on-secondary-container);
       }
     `
         ];
         render() {
             return html `
-      <custom-elevation></custom-elevation>
-
-      <custom-icon slot="icon" .icon=${this.icon}></custom-icon>
-
-      <span class="hover"></span>
+      <button label=${this.label}>
+        <custom-elevation></custom-elevation>
+        <slot name="icon"> <custom-icon .icon=${this.icon}></custom-icon></slot>
+        <span class="label">${this.label}</span>
+        <span class="hover"></span>
+      </button>
     `;
         }
         constructor() {

package/exports/icon-set.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, css, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, css } from '@vandeurenglenn/lite';
 import PubSub from '@vandeurenglenn/little-pubsub';
 
 globalThis.pubsub = globalThis.pubsub || new PubSub(true);

package/exports/icon.js

@@ -1,6 +1,6 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
 import PubSub from '@vandeurenglenn/little-pubsub';
-import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, css, html } from '@vandeurenglenn/lite';
 
 globalThis.pubsub = globalThis.pubsub || new PubSub(true);
 let CustomIcon = (() => {
@@ -27,7 +27,7 @@ let CustomIcon = (() => {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _host_decorators = [property()];
             _icon_decorators = [property({ attribute: true, reflect: true })];
-            _setName_decorators = [property()];
+            _setName_decorators = [property({ attribute: true, reflect: true })];
             __icon_decorators = [property()];
             __esDecorate(this, null, _host_decorators, { kind: "accessor", name: "host", static: false, private: false, access: { has: obj => "host" in obj, get: obj => obj.host, set: (obj, value) => { obj.host = value; } }, metadata: _metadata }, _host_initializers, _host_extraInitializers);
             __esDecorate(this, null, _icon_decorators, { kind: "accessor", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
@@ -43,7 +43,7 @@ let CustomIcon = (() => {
         #icon_accessor_storage = (__runInitializers(this, _host_extraInitializers), __runInitializers(this, _icon_initializers, void 0));
         get icon() { return this.#icon_accessor_storage; }
         set icon(value) { this.#icon_accessor_storage = value; }
-        #setName_accessor_storage = (__runInitializers(this, _icon_extraInitializers), __runInitializers(this, _setName_initializers, void 0));
+        #setName_accessor_storage = (__runInitializers(this, _icon_extraInitializers), __runInitializers(this, _setName_initializers, 'icons'));
         get setName() { return this.#setName_accessor_storage; }
         set setName(value) { this.#setName_accessor_storage = value; }
         #_icon_accessor_storage = (__runInitializers(this, _setName_extraInitializers), __runInitializers(this, __icon_initializers, void 0));
@@ -68,24 +68,19 @@ let CustomIcon = (() => {
         static styles = [
             css `
       :host {
-        --__custom-icon-size: var(--custom-icon-size, 24px);
-        --custom-icon-color: var(--md-sys-color-on-surface);
         display: flex;
         height: var(--custom-icon-size, 24px);
         width: var(--custom-icon-size, 24px);
       }
 
       svg {
-        fill: var(--custom-icon-color);
+        fill: var(--custom-icon-color, var(--md-sys-color-on-surface));
         height: inherit;
         width: inherit;
         pointer-events: none;
       }
     `
         ];
-        connectedCallback() {
-            this.setName = this.getAttribute('set-name') || 'icons';
-        }
         render() {
             return html ` ${this._icon} `;
         }

package/exports/input.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, css, html } from '@vandeurenglenn/lite';
 
 let TimePickerInput = (() => {
     let _classDecorators = [customElement('custom-time-picker-input')];

package/exports/list-item.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, assignedElements, query, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, assignedElements, query, css, html } from '@vandeurenglenn/lite';
 
 let CustomListItem = (() => {
     let _classDecorators = [customElement('custom-list-item')];

package/exports/menu.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, css, html } from '@vandeurenglenn/lite';
 import './dropdown.js';
 import './selector.js';
 import './selector-mixin.js';

package/exports/minute-field.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, css, html } from '@vandeurenglenn/lite';
 
 // import
 let TimePickerMinuteField = (() => {

package/exports/notification.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { css, html, LitElement } from 'lit';
+import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import './icon.js';
 import '@vandeurenglenn/flex-elements/column.js';

package/exports/notifications.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, css, html } from '@vandeurenglenn/lite';
 import './notification.js';
 import './icon.js';
 import './pane.js';
@@ -11,6 +11,7 @@ import '@vandeurenglenn/little-pubsub';
 import './elevation.js';
 import './icon-button.js';
 import './button.js';
+import './button.css.js';
 import '@vandeurenglenn/custom-shared-styles/pane.css';
 
 let CustomNotifications = (() => {

package/exports/pane.js

@@ -1,10 +1,11 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, html } from '@vandeurenglenn/lite';
 import './elevation.js';
 import './icon-button.js';
 import './icon.js';
 import style from '@vandeurenglenn/custom-shared-styles/pane.css';
 import './button.js';
+import './button.css.js';
 import '@vandeurenglenn/little-pubsub';
 
 let CustomPane = (() => {

package/exports/prompt.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { LiteElement, property, css, html } from '@vandeurenglenn/lite';
 
 // import './../dialog/dialog'
 globalThis.customPrompt = (promptTitle) => {

package/exports/rail.js

@@ -1,9 +1,10 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, html } from '@vandeurenglenn/lite';
 import './pane.js';
 import './elevation.js';
 import './icon-button.js';
 import './button.js';
+import './button.css.js';
 import './icon.js';
 import '@vandeurenglenn/little-pubsub';
 import '@vandeurenglenn/custom-shared-styles/pane.css';

package/exports/root.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, css, html } from '@vandeurenglenn/lite';
 import './theme.js';
 
 let CustomRoot = (() => {

package/exports/section.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, css, html } from '@vandeurenglenn/lite';
 import './section2.js';
 import './code.js';
 import './scroll-mixin.js';

package/exports/summary-mirror.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, html } from '@vandeurenglenn/lite';
 
 let CustomSummaryMirror = (() => {
     let _classDecorators = [customElement('custom-summary-mirror')];

package/exports/summary.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, css, html } from '@vandeurenglenn/lite';
 
 let CustomSummary = (() => {
     let _classDecorators = [customElement('custom-summary')];

package/exports/supporting-pane.js

@@ -1,9 +1,10 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, query, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, query, html } from '@vandeurenglenn/lite';
 import './pane.js';
 import './elevation.js';
 import './icon-button.js';
 import './button.js';
+import './button.css.js';
 import './icon.js';
 import '@vandeurenglenn/little-pubsub';
 import '@vandeurenglenn/custom-shared-styles/pane.css';

package/exports/tab.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, html } from '@vandeurenglenn/lite';
 
 let CustomTab = (() => {
     let _classDecorators = [customElement('custom-tab')];

package/exports/text-field.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, query, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, query, property, css, html } from '@vandeurenglenn/lite';
 
 let TextField = (() => {
     let _classDecorators = [customElement('text-field')];

package/exports/theme.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property } from '@vandeurenglenn/lite';
 
 // @material-symbols
 let CustomTheme = (() => {

package/exports/time-picker.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, css, html } from '@vandeurenglenn/lite';
 import './input.js';
 
 let CustomTimePicker = (() => {

package/exports/toggle-button.js

@@ -1,8 +1,9 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, html } from '@vandeurenglenn/lite';
 import './button.js';
 import './toggle.js';
 import './elevation.js';
+import './button.css.js';
 
 let CustomToggleButton = (() => {
     let _classDecorators = [customElement('custom-toggle-button')];

package/exports/toggle.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, css, html } from '@vandeurenglenn/lite';
 
 let CustomToggle = (() => {
     let _classDecorators = [customElement('custom-toggle')];

package/exports/top-app-bar.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, html } from '@vandeurenglenn/lite';
 import '@vandeurenglenn/flex-elements/it.js';
 import '@vandeurenglenn/flex-elements/row.js';
 import style from '@vandeurenglenn/custom-shared-styles/top-app-bar.css';

package/exports/typography.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, css, html } from '@vandeurenglenn/lite';
 
 let CustomTypography = (() => {
     let _classDecorators = [customElement('custom-typography')];

package/exports/upload-file.js

@@ -1,5 +1,5 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
-import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { customElement, LiteElement, property, css, html } from '@vandeurenglenn/lite';
 
 let CustomUploadFile = (() => {
     let _classDecorators = [customElement('custom-upload-file')];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vandeurenglenn/lite-elements",
-	"version": "0.3.67",
+	"version": "0.3.69",
 	"description": "set of lite elements following Material Design 3 spec",
 	"type": "module",
 	"scripts": {
@@ -23,7 +23,7 @@
 		"@material/web": "^2.2.0",
 		"@vandeurenglenn/custom-shared-styles": "^0.0.21",
 		"@vandeurenglenn/flex-elements": "^1.3.2",
-		"@vandeurenglenn/lite": "^0.2.56",
+		"@vandeurenglenn/lite": "^0.2.59",
 		"custom-element-decorator": "^0.6.0"
 	},
 	"devDependencies": {
@@ -59,6 +59,14 @@
 			"import": "./exports/banner.js",
 			"types": "./exports/banner/banner.d.ts"
 		},
+		"./button.css": {
+			"import": "./exports/button.css.js",
+			"types": "./exports/button/styles/button.css.d.ts"
+		},
+		"./button.css.js": {
+			"import": "./exports/button.css.js",
+			"types": "./exports/button/styles/button.css.d.ts"
+		},
 		"./button": {
 			"import": "./exports/button.js",
 			"types": "./exports/button/button.d.ts"