@vollowx/seele 0.11.1 → 0.11.2

package/README.md

@@ -42,7 +42,7 @@ import '@vollowx/seele';
 
 // OR Import specific components (Recommended)
 import '@vollowx/seele/m3/button/common-button.js';
-import '@vollowx/seele/m3/checkbox.js';
+import '@vollowx/seele/m3/checkbox/checkbox.js';
 ```
 
 ### Using Components

package/custom-elements.json

@@ -666,6 +666,26 @@
               },
               "readonly": true,
               "default": "{ show: 300, hide: 200 }"
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "'standard' | 'vibrant'"
+              },
+              "default": "'standard'",
+              "attribute": "color",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "'standard' | 'vibrant'"
+              },
+              "default": "'standard'",
+              "fieldName": "color"
             }
           ],
           "superclass": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "description": "Standard Extensible Elements. A web components library that can be styled and extended freely, pre-providing components in Material Design 3.",
   "author": "vollowx",
   "license": "Apache-2.0",

package/src/all.js

@@ -2,19 +2,22 @@ export { M3Button } from './m3/button/common-button.js';
 export { M3ButtonToggle } from './m3/button/common-button-toggle.js';
 export { M3IconButton } from './m3/button/icon-button.js';
 export { M3IconButtonToggle } from './m3/button/icon-button-toggle.js';
-export { M3FilledTextField } from './m3/text-field/filled-text-field.js';
-export { M3OutlinedTextField } from './m3/text-field/outlined-text-field.js';
+export { M3Checkbox } from './m3/checkbox/checkbox.js';
+export { M3Divider } from './m3/divider/divider.js';
+export { M3Fab } from './m3/fab/fab.js';
+export { M3FocusRing } from './m3/focus-ring/focus-ring.js';
+export { M3Item } from './m3/item/item.js';
+export { M3List } from './m3/list/list.js';
+export { M3ListItem } from './m3/list/list-item.js';
+export { M3Menu } from './m3/menu/menu.js';
+export { M3MenuItem } from './m3/menu/menu-item.js';
+export { M3Ripple } from './m3/ripple/ripple.js';
 export { MdFilledSelect } from './m3/select/filled-select.js';
 export { MdOutlinedSelect } from './m3/select/outlined-select.js';
-export { M3Checkbox } from './m3/checkbox.js';
-export { M3FAB } from './m3/fab.js';
-export { M3Item } from './m3/item.js';
-export { M3List } from './m3/list.js';
-export { M3Menu } from './m3/menu.js';
-export { M3MenuItem } from './m3/menu-item.js';
-export { M3Option } from './m3/option.js';
-export { M3Ripple } from './m3/ripple.js';
-export { M3Slider } from './m3/slider.js';
-export { M3Switch } from './m3/switch.js';
-export { M3Tooltip } from './m3/tooltip.js';
-export { M3Toolbar } from './m3/toolbar.js';
+export { M3Option } from './m3/select/option.js';
+export { M3Slider } from './m3/slider/slider.js';
+export { M3Switch } from './m3/switch/switch.js';
+export { M3FilledTextField } from './m3/text-field/filled-text-field.js';
+export { M3OutlinedTextField } from './m3/text-field/outlined-text-field.js';
+export { M3Toolbar } from './m3/toolbar/toolbar.js';
+export { M3Tooltip } from './m3/tooltip/tooltip.js';

package/src/base/select.js

@@ -15,6 +15,7 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
  * @fires {Event} input - Fires when the value is changed.
  *
  * TODO: Render multiple values
+ * FIXME: `aria-expanded` set twice by both Lit and Menu
  */ export class Select extends Base {
     get value() {
         return this[VALUE];

package/src/base/toggle-button.js

@@ -51,7 +51,6 @@ export class ToggleButton extends Base {
             e.stopPropagation();
             e.preventDefault();
             if (this._ignoreClick) {
-                console.log('ignoring click from', e.target);
                 this._ignoreClick = false;
                 return;
             }

package/src/m3/button/common-button-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const commonButtonStyles = css`@layer common-button{:host{--_padding:16px;--md-focus-ring-shape:calc(var(--_h) / 2);background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);border-radius:calc(var(--_h) / 2);color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);font:var(--md-sys-typography-label-large);min-width:64px;padding-inline:calc(var(--_padding) - 1px);transition:box-shadow var(--md-sys-motion-std-effects-slow-duration) var(--md-sys-motion-std-effects-slow), border-radius var(--md-sys-motion-std-effects-slow-duration) var(--md-sys-motion-std-effects-slow);gap:8px}:host([size=xsmall]){--_padding:12px;gap:4px}:host([size=medium]){--_padding:24px;font:var(--md-sys-typography-title-medium);gap:8px}:host([size=large]){--_padding:48px;font:var(--md-sys-typography-headline-small);gap:12px}:host([size=xlarge]){--_padding:64px;font:var(--md-sys-typography-headline-medium);gap:16px}:host([trailingicon]){flex-direction:row-reverse}:host([variant=elevated]){--_background-color:var(--md-sys-color-surface-container-low);--_text-color:var(--_color);box-shadow:var(--md-sys-elevation-shadow-1)}:host([variant=outlined]){padding-inline:calc(var(--_padding) - 1px)}:host([variant=text]){padding-inline:calc(var(--_padding) / 4 * 3)}@media (hover:hover) and (pointer:fine){:host([variant=filled]:hover:not(:active)),:host([variant=tonal]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-1)}:host([variant=elevated]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-2)}}[part~=icon]{fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}}`;
+export const commonButtonStyles = css`@layer common-button{:host{--_padding:16px;--md-focus-ring-shape:calc(var(--_h) / 2);background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);border-radius:calc(var(--_h) / 2);color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);font:var(--md-sys-typography-label-large);min-width:64px;padding-inline:var(--_padding);transition:box-shadow var(--md-sys-motion-std-effects-slow-duration) var(--md-sys-motion-std-effects-slow), border-radius var(--md-sys-motion-std-effects-slow-duration) var(--md-sys-motion-std-effects-slow);gap:8px}:host([size=xsmall]){--_padding:12px;gap:4px}:host([size=medium]){--_padding:24px;font:var(--md-sys-typography-title-medium);gap:8px}:host([size=large]){--_padding:48px;font:var(--md-sys-typography-headline-small);gap:12px}:host([size=xlarge]){--_padding:64px;font:var(--md-sys-typography-headline-medium);gap:16px}:host([trailing-icon]){flex-direction:row-reverse}:host([variant=outlined]){padding-inline:calc(var(--_padding) - 1px)}:host([variant=text]){padding-inline:calc(var(--_padding) / 4 * 3)}[part~=icon]{fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}}@layer override{:host([variant=elevated]){--_background-color:var(--md-sys-color-surface-container-low);--_text-color:var(--_color);box-shadow:var(--md-sys-elevation-shadow-1)}@media (hover:hover) and (pointer:fine){:host([variant=filled]:hover:not(:active)),:host([variant=tonal]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-1)}:host([variant=elevated]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-2)}}}`;

package/src/m3/button/common-button-toggle.js

@@ -2,8 +2,8 @@ import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ToggleButton } from '../../base/toggle-button.js';
-import '../focus-ring.js';
-import '../ripple.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
 import { targetStyles } from '../target-styles.css.js';
 import { sharedButtonStyles } from './shared-button-styles.css.js';
 import { sharedButtonToggleStyles } from './shared-button-toggle-styles.css.js';
@@ -58,7 +58,8 @@ _ts_decorate([
 _ts_decorate([
     property({
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: 'trailing-icon'
     })
 ], M3ButtonToggle.prototype, "trailingIcon", void 0);
 M3ButtonToggle = _ts_decorate([

package/src/m3/button/common-button.js

@@ -2,8 +2,8 @@ import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { Button } from '../../base/button.js';
-import '../focus-ring.js';
-import '../ripple.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
 import { targetStyles } from '../target-styles.css.js';
 import { sharedButtonStyles } from './shared-button-styles.css.js';
 import { commonButtonStyles } from './common-button-styles.css.js';
@@ -54,7 +54,8 @@ _ts_decorate([
 _ts_decorate([
     property({
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: 'trailing-icon'
     })
 ], M3Button.prototype, "trailingIcon", void 0);
 M3Button = _ts_decorate([

package/src/m3/button/icon-button-toggle.js

@@ -2,8 +2,8 @@ import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ToggleButton } from '../../base/toggle-button.js';
-import '../focus-ring.js';
-import '../ripple.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
 import { targetStyles } from '../target-styles.css.js';
 import { sharedButtonStyles } from './shared-button-styles.css.js';
 import { sharedButtonToggleStyles } from './shared-button-toggle-styles.css.js';

package/src/m3/button/icon-button.js

@@ -2,8 +2,8 @@ import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { Button } from '../../base/button.js';
-import '../focus-ring.js';
-import '../ripple.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
 import { targetStyles } from '../target-styles.css.js';
 import { sharedButtonStyles } from './shared-button-styles.css.js';
 import { iconButtonStyles } from './icon-button-styles.css.js';

package/src/m3/{checkbox.js → checkbox/checkbox.js}

@@ -1,10 +1,10 @@
 import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { Checkbox } from '../base/checkbox.js';
-import './focus-ring.js';
+import { Checkbox } from '../../base/checkbox.js';
+import '../focus-ring/focus-ring.js';
 import { checkboxStyles } from './checkbox-styles.css.js';
-import { targetStyles } from './target-styles.css.js';
+import { targetStyles } from '../target-styles.css.js';
 export class M3Checkbox extends Checkbox {
     static{
         this.styles = [
@@ -31,6 +31,7 @@ export class M3Checkbox extends Checkbox {
     }
     connectedCallback() {
         super.connectedCallback();
+        // TODO: Since Ripple is no longer rendered server-side, this might be unnecessary
         // SSR'd <md-checkbox> components don't have their labels set up on time
         this.updateComplete.then(()=>{
             this.$ripple.attach(this, true);

package/src/m3/divider/divider-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const dividerStyles = css`:host{box-sizing:border-box;height:var(--md-divider-height,1px);width:100%;display:flex;&:before{background-color:var(--md-divider-color,var(--md-sys-color-outline-variant));content:"";width:100%;height:100%}}@media (forced-colors:active){:host:before{background:canvastext}}:host([inset]),:host([inset-start]){padding-inline-start:8px}:host([inset]),:host([inset-end]){padding-inline-end:8px}`;

package/src/m3/divider/divider.js

@@ -0,0 +1,43 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { dividerStyles } from './divider-styles.css.js';
+export class M3Divider extends LitElement {
+    static{
+        this.styles = [
+            dividerStyles
+        ];
+    }
+    constructor(...args){
+        super(...args), this.vertical = false, this.inset = false, this.insetStart = false, this.insetEnd = false;
+    }
+}
+_ts_decorate([
+    property({
+        type: Boolean,
+        reflect: false
+    })
+], M3Divider.prototype, "vertical", void 0);
+_ts_decorate([
+    property({
+        type: Boolean,
+        reflect: false
+    })
+], M3Divider.prototype, "inset", void 0);
+_ts_decorate([
+    property({
+        type: Boolean,
+        reflect: false,
+        attribute: 'inset-start'
+    })
+], M3Divider.prototype, "insetStart", void 0);
+_ts_decorate([
+    property({
+        type: Boolean,
+        reflect: false,
+        attribute: 'inset-end'
+    })
+], M3Divider.prototype, "insetEnd", void 0);
+M3Divider = _ts_decorate([
+    customElement('md-divider')
+], M3Divider);

package/src/m3/fab/fab-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const fabStyles = css`:host{--md-focus-ring-shape:var(--_border-radius);--_text-color:var(--md-sys-color-on-primary);--_background-color:var(--md-sys-color-primary);--_size:56px;--_border-radius:16px;--_icon-size:24px;background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);border-radius:var(--_border-radius);box-shadow:var(--md-sys-elevation-shadow-3);box-sizing:border-box;color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);cursor:pointer;font:var(--md-sys-typography-label-large);height:var(--_size);min-width:var(--_size);padding-inline:calc((var(--_size) - var(--_icon-size)) / 2);-webkit-tap-highlight-color:transparent;transition:box-shadow var(--md-sys-motion-std-effects-slow-duration) var(--md-sys-motion-std-effects-slow);-webkit-user-select:none;user-select:none;vertical-align:middle;outline:0;justify-content:center;align-items:center;gap:8px;display:inline-flex;position:relative}:host([size=medium]){--_size:80px;--_border-radius:20px;--_icon-size:28px}:host([size=large]){--_size:96px;--_border-radius:28px;--_icon-size:36px}:host([color=primary-container]){--_text-color:var(--md-sys-color-on-primary-container);--_background-color:var(--md-sys-color-primary-container)}:host([color=secondary-container]){--_text-color:var(--md-sys-color-on-secondary-container);--_background-color:var(--md-sys-color-secondary-container)}:host([color=tertiary-container]){--_text-color:var(--md-sys-color-on-tertiary-container);--_background-color:var(--md-sys-color-tertiary-container)}:host([color=secondary]){--_text-color:var(--md-sys-color-on-secondary);--_background-color:var(--md-sys-color-secondary)}:host([color=tertiary]){--_text-color:var(--md-sys-color-on-tertiary);--_background-color:var(--md-sys-color-tertiary)}:host([color=surface]){--_text-color:var(--md-sys-color-primary);--_background-color:var(--md-sys-color-surface-container-high)}:host(:disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:12%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;box-shadow:none;cursor:default;pointer-events:none}@media (hover:hover) and (pointer:fine){:host(:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-4)}}::slotted(:not([slot=label])){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em;display:inline-flex}::slotted([slot=label]){margin-inline:4px}`;

package/src/m3/{fab.js → fab/fab.js}

@@ -1,12 +1,12 @@
 import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { Button } from '../base/button.js';
-import './focus-ring.js';
-import './ripple.js';
+import { Button } from '../../base/button.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
 import { fabStyles } from './fab-styles.css.js';
-import { targetStyles } from './target-styles.css.js';
-export class M3FAB extends Button {
+import { targetStyles } from '../target-styles.css.js';
+export class M3Fab extends Button {
     static{
         this.styles = [
             ...super.styles,
@@ -31,12 +31,12 @@ _ts_decorate([
     property({
         reflect: true
     })
-], M3FAB.prototype, "size", void 0);
+], M3Fab.prototype, "size", void 0);
 _ts_decorate([
     property({
         reflect: true
     })
-], M3FAB.prototype, "color", void 0);
-M3FAB = _ts_decorate([
+], M3Fab.prototype, "color", void 0);
+M3Fab = _ts_decorate([
     customElement('md-fab')
-], M3FAB);
+], M3Fab);

package/src/m3/field/filled-field.js

@@ -2,7 +2,7 @@ import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { M3Field } from './field.js';
-import '../ripple.js';
+import '../ripple/ripple.js';
 import { filledFieldStyles } from './filled-field-styles.css.js';
 export class M3FilledField extends M3Field {
     static{

package/src/m3/{focus-ring.js → focus-ring/focus-ring.js}

@@ -1,10 +1,10 @@
 import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { customElement } from '../core/decorators.js';
-import { focusVisible } from '../core/focus-visible.js';
-import { Attachable } from '../base/mixins/attachable.js';
-import { InternalsAttached, internals } from '../base/mixins/internals-attached.js';
+import { customElement } from '../../core/decorators.js';
+import { focusVisible } from '../../core/focus-visible.js';
+import { Attachable } from '../../base/mixins/attachable.js';
+import { InternalsAttached, internals } from '../../base/mixins/internals-attached.js';
 import { focusRingStyles } from './focus-ring-styles.css.js';
 export class M3FocusRing extends Attachable(InternalsAttached(LitElement)) {
     constructor(){

package/src/m3/{item-styles.css.js → item/item-styles.css.js}

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const itemStyles = css`:host{border-radius:inherit;box-sizing:border-box;font:var(--md-sys-typography-body-large);text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex:1;align-items:center;gap:16px;min-height:48px;padding:12px;display:flex;position:relative}:host([multiline]){min-height:72px}[name=container]{border-radius:inherit}[name=container]::slotted(*){position:absolute;inset:0}.default-slot{display:inline}.default-slot,.text ::slotted(*){text-overflow:ellipsis;overflow:hidden}.text{flex-direction:column;flex:1;display:flex;overflow:hidden}`;
+export const itemStyles = css`:host{border-radius:inherit;box-sizing:border-box;font:var(--md-sys-typography-body-large);text-overflow:ellipsis;-webkit-user-select:none;user-select:none;flex:1;align-items:center;gap:16px;min-height:48px;padding:12px;display:flex;position:relative}:host([multiline]){min-height:72px}[name=container]{border-radius:inherit}[name=container]::slotted(*){position:absolute;inset:0}.default-slot{display:inline}.default-slot,.text ::slotted(*){text-overflow:ellipsis;overflow:hidden}.text{flex-direction:column;flex:1;display:flex;overflow:hidden}[name=overline]{font:var(--md-sys-typography-label-small)}[name=supporting-text]{color:var(--md-item-supporting-text-color,var(--md-sys-color-on-surface-variant));font:var(--md-sys-typography-body-medium)}`;

package/src/m3/{item.js → item/item.js}

@@ -1,7 +1,7 @@
 import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { Item } from '../base/item.js';
+import { Item } from '../../base/item.js';
 import { itemStyles } from './item-styles.css.js';
 export class M3Item extends Item {
     static{

package/src/m3/list/list-item-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const listItemStyles = css`:host{--md-focus-ring-shape:12px;--md-focus-ring-inward-offset:-3px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:4px;outline:0;display:flex}:host(:first-of-type){border-radius:12px 12px 4px 4px}:host(:last-of-type){border-radius:4px 4px 12px 12px}:host(:state(selected)){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);border-radius:12px}:host(:disabled){cursor:default;opacity:.3;pointer-events:none}md-item,md-item div[slot=container]{border-radius:inherit}`;

package/src/m3/{list-item.js → list/list-item.js}

@@ -1,7 +1,8 @@
 import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { html } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
-import { ListItem } from '../base/list-item.js';
+import { ListItem } from '../../base/list-item.js';
+import '../item/item.js';
 import { listItemStyles } from './list-item-styles.css.js';
 export class M3ListItem extends ListItem {
     constructor(){
@@ -34,7 +35,16 @@ export class M3ListItem extends ListItem {
           <md-focus-ring inward></md-focus-ring>
           <md-ripple></md-ripple>
         </div>
+        <slot slot="start" name="start"></slot>
+        <slot slot="overline" name="overline"></slot>
         <slot></slot>
+        <slot slot="headline" name="headline"></slot>
+        <slot slot="supporting-text" name="supporting-text"></slot>
+        <slot
+          slot="trailing-supporting-text"
+          name="trailing-supporting-text"
+        ></slot>
+        <slot slot="end" name="end"></slot>
       </md-item>
     `;
     }

package/src/m3/{menu-item.js → menu/menu-item.js}

@@ -1,7 +1,7 @@
 import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { customElement } from 'lit/decorators.js';
-import { M3ListItem } from './list-item.js';
-import { MenuItemMixin } from '../base/menu-item.js';
+import { M3ListItem } from '../list/list-item.js';
+import { MenuItemMixin } from '../../base/menu-item.js';
 export class M3MenuItem extends MenuItemMixin(M3ListItem) {
 }
 M3MenuItem = _ts_decorate([

package/src/m3/menu/menu-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const menuStyles = css`:host{min-width:112px;display:contents}[part=menu]{background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow-2);box-sizing:border-box;color:var(--md-sys-color-on-surface);height:inherit;max-height:var(--md-menu-max-height,inherit);max-width:inherit;min-width:inherit;opacity:0;-webkit-user-select:none;user-select:none;z-index:1000;border-radius:16px;outline:0;padding:4px;position:absolute;inset:auto;overflow-y:auto;transform:scaleY(.4)}:host([color=vibrant]){& [part=menu]{--md-divider-color:var(--md-sys-color-tertiary);--md-item-supporting-text-color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}& ::slotted([selected]){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary);background-color:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}}:host([alignstrategy=fixed]) [part=menu]{position:fixed}[part=items]{opacity:0;flex-direction:column;gap:2px;display:flex}:host(:state(closed)) [part=menu]{display:none}:host(:state(opening)){& [part=menu]{opacity:1;transition:opacity 67ms, transform var(--md-sys-motion-exp-spatial-default-duration) var(--md-sys-motion-exp-spatial-default);display:block;transform:scaleY(1)}& [part=items]{opacity:1;transition:opacity 67ms linear 67ms}}:host(:state(opened)){& [part=menu]{opacity:1;display:block;transform:scaleY(1)}& [part=items]{opacity:1}}:host(:state(closing)){& [part=menu]{opacity:0;transition:opacity var(--md-sys-motion-exp-effects-fast-duration), transform var(--md-sys-motion-exp-effects-slow-duration) var(--md-sys-motion-exp-effects-slow);transform:scaleY(.4)}& [part=items]{opacity:0;transition:opacity 67ms}}::slotted(md-divider){margin-block:6px}`;

package/src/m3/{menu.js → menu/menu.js}

@@ -1,6 +1,7 @@
 import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { customElement } from 'lit/decorators.js';
-import { Menu } from '../base/menu.js';
+import { property } from 'lit/decorators.js';
+import { Menu } from '../../base/menu.js';
 import { menuStyles } from './menu-styles.css.js';
 export class M3Menu extends Menu {
     static{
@@ -18,10 +19,15 @@ export class M3Menu extends Menu {
             'md-option'
         ], this._durations = {
             show: 300,
-            hide: 200
-        };
+            hide: 150
+        }, this.color = 'standard';
     }
 }
+_ts_decorate([
+    property({
+        reflect: true
+    })
+], M3Menu.prototype, "color", void 0);
 M3Menu = _ts_decorate([
     customElement('md-menu')
 ], M3Menu);

package/src/m3/{ripple.js → ripple/ripple.js}

@@ -1,9 +1,9 @@
 import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { customElement } from '../core/decorators.js';
-import { Attachable } from '../base/mixins/attachable.js';
-import { InternalsAttached, internals } from '../base/mixins/internals-attached.js';
+import { customElement } from '../../core/decorators.js';
+import { Attachable } from '../../base/mixins/attachable.js';
+import { InternalsAttached, internals } from '../../base/mixins/internals-attached.js';
 import { rippleStyles } from './ripple-styles.css.js';
 const PRESS_GROW_MS = 450;
 const MINIMUM_PRESS_MS = 225;

package/src/m3/{option.js → select/option.js}

@@ -1,7 +1,7 @@
 import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { customElement } from 'lit/decorators.js';
-import { OptionMixin } from '../base/option.js';
-import { M3ListItem } from './list-item.js';
+import { OptionMixin } from '../../base/option.js';
+import { M3ListItem } from '../list/list-item.js';
 export class M3Option extends OptionMixin(M3ListItem) {
 }
 M3Option = _ts_decorate([

package/src/m3/{slider.js → slider/slider.js}

@@ -4,8 +4,8 @@ import { customElement } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
-import { Slider } from '../base/slider.js';
-import './focus-ring.js';
+import { Slider } from '../../base/slider.js';
+import '../focus-ring/focus-ring.js';
 import { sliderStyles } from './slider-styles.css.js';
 export class M3Slider extends Slider {
     static{

package/src/m3/{switch.js → switch/switch.js}

@@ -1,10 +1,10 @@
 import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { ToggleButton } from '../base/toggle-button.js';
-import './focus-ring.js';
+import { ToggleButton } from '../../base/toggle-button.js';
+import '../focus-ring/focus-ring.js';
 import { switchStyles } from './switch-styles.css.js';
-import { targetStyles } from './target-styles.css.js';
+import { targetStyles } from '../target-styles.css.js';
 function isRTL() {
     return document.documentElement.dir === 'rtl';
 }

package/src/m3/toolbar/toolbar-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const toolbarStyles = css`:host{--_padding:16px;--_gap:32px;--_container-color:var(--md-sys-color-surface-container);--_on-color:var(--md-sys-color-on-surface);background-color:color-mix(in srgb, var(--_container-color) var(--_container-opacity,100%), transparent);box-sizing:border-box;color:color-mix(in srgb, var(--_on-color) var(--_on-opacity,100%), transparent);align-items:center;width:100%;height:64px;display:flex}[part=container]{box-sizing:border-box;align-items:center;gap:var(--_gap);height:64px;padding:0 var(--_padding);flex:auto;justify-content:space-between;width:100%;display:flex}[part=fab-slot]{justify-content:flex-end;align-items:center;display:flex}:host(:not([orientation=vertical])) ::slotted([slot=fab]){margin-inline-start:8px}:host([orientation=vertical]) ::slotted([slot=fab]){margin-block-start:8px}:host([type=floating]){--_padding:12px;--_gap:4px;--_container-color:var(--md-sys-color-surface-container-high);box-shadow:none;background:0 0;width:fit-content;max-width:calc(100% - 32px);& [part=container]{background-color:color-mix(in srgb, var(--_container-color) var(--_container-opacity,100%), transparent);box-shadow:var(--md-toolbar-shadow,var(--md-sys-elevation-shadow-3));border-radius:32px;width:fit-content}& ::slotted(md-button),& ::slotted(md-button-toggle),& ::slotted(md-icon-button),& ::slotted(md-icon-button-toggle){--md-focus-ring-shape:calc(var(--_h) / 2);border-radius:calc(var(--_h) / 2)}}:host([type=floating][orientation=vertical]){flex-direction:column;align-items:stretch;width:64px;min-height:auto;& [part=container]{height:fit-content;padding:var(--_padding) 0;flex-direction:column;width:100%}}::slotted(md-button-toggle[variant=tonal]:not(:state(checked))),::slotted(md-icon-button-toggle[variant=tonal]:not(:state(checked))){--_background-color:transparent}:host([color=vibrant]){--_container-color:var(--md-sys-color-primary-container);--_on-color:var(--md-sys-color-on-primary-container);& ::slotted(md-icon-button[variant=text]),& ::slotted(md-icon-button-toggle[variant=tonal]){--_text-color:var(--md-sys-color-on-primary-container)}& ::slotted(md-icon-button-toggle[variant=tonal]:state(checked)){--_background-color:var(--md-sys-color-surface-container);--_text-color:var(--md-sys-color-on-surface)}}`;

package/src/m3/{toolbar.js → toolbar/toolbar.js}

@@ -1,7 +1,7 @@
 import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { internals, InternalsAttached } from '../base/mixins/internals-attached.js';
+import { internals, InternalsAttached } from '../../base/mixins/internals-attached.js';
 import { toolbarStyles } from './toolbar-styles.css.js';
 export class M3Toolbar extends InternalsAttached(LitElement) {
     static{

package/src/m3/{tooltip.js → tooltip/tooltip.js}

@@ -1,6 +1,6 @@
 import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { customElement } from 'lit/decorators.js';
-import { Tooltip } from '../base/tooltip.js';
+import { Tooltip } from '../../base/tooltip.js';
 import { tooltipStyles } from './tooltip-styles.css.js';
 export class M3Tooltip extends Tooltip {
     static{

package/src/m3/fab-styles.css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export const fabStyles = css`:host{--md-focus-ring-shape:var(--_border-radius);--_text-color:var(--md-sys-color-on-primary);--_background-color:var(--md-sys-color-primary);--_size:56px;--_border-radius:16px;--_icon-size:24px;background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);border-radius:var(--_border-radius);box-shadow:var(--md-sys-elevation-shadow-3);box-sizing:border-box;color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);cursor:pointer;font:var(--md-sys-typography-label-large);height:var(--_size);min-width:var(--_size);padding-inline:calc((var(--_size) - var(--_icon-size)) / 2);-webkit-tap-highlight-color:transparent;transition:box-shadow var(--md-sys-motion-std-effects-slow-duration) var(--md-sys-motion-std-effects-slow);-webkit-user-select:none;user-select:none;vertical-align:middle;outline:0;justify-content:center;align-items:center;gap:8px;display:inline-flex;position:relative}:host([lowered]){--_background-color:var(--md-sys-color-surface-container-low);box-shadow:var(--md-sys-elevation-shadow-1)}:host([size=medium]){--_size:80px;--_border-radius:20px;--_icon-size:28px}:host([size=large]){--_size:96px;--_border-radius:28px;--_icon-size:36px}:host([color=primary-container]){--_text-color:var(--md-sys-color-on-primary-container);--_background-color:var(--md-sys-color-primary-container)}:host([color=secondary-container]){--_text-color:var(--md-sys-color-on-secondary-container);--_background-color:var(--md-sys-color-secondary-container)}:host([color=tertiary-container]){--_text-color:var(--md-sys-color-on-tertiary-container);--_background-color:var(--md-sys-color-tertiary-container)}:host([color=secondary]){--_text-color:var(--md-sys-color-on-secondary);--_background-color:var(--md-sys-color-secondary)}:host([color=tertiary]){--_text-color:var(--md-sys-color-on-tertiary);--_background-color:var(--md-sys-color-tertiary)}:host([color=surface]){--_text-color:var(--md-sys-color-primary);--_background-color:var(--md-sys-color-surface-container-high)}:host(:disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:12%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;box-shadow:none;cursor:default;pointer-events:none}@media (hover:hover) and (pointer:fine){:host(:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-4)}}::slotted(:not([slot=label])){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em;display:inline-flex}::slotted([slot=label]){margin-inline:4px}`;

package/src/m3/list-item-styles.css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export const listItemStyles = css`:host{--md-focus-ring-shape:12px;--md-focus-ring-inward-offset:-4px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:12px;outline:0;display:flex}:host(:state(selected)){background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}:host(:disabled){cursor:default;opacity:.3;pointer-events:none}md-item,md-item div[slot=container]{border-radius:inherit}`;

package/src/m3/menu-styles.css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export const menuStyles = css`:host{min-width:112px;display:contents}[part=menu]{background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow-2);box-sizing:border-box;color:var(--md-sys-color-on-surface);height:inherit;max-height:var(--md-menu-max-height,inherit);max-width:inherit;min-width:inherit;opacity:0;-webkit-user-select:none;user-select:none;z-index:1000;border-radius:16px;outline:0;padding:4px;position:absolute;inset:auto;overflow-y:auto;transform:scaleY(.4)}:host([alignstrategy=fixed]) [part=menu]{position:fixed}:host(:state(closed)) [part=menu]{display:none}:host(:state(opening)) [part=menu]{opacity:1;transition:opacity 67ms, transform var(--md-sys-motion-exp-effects-slow-duration) var(--md-sys-motion-exp-effects-slow);display:block;transform:scaleY(1)}:host(:state(opened)) [part=menu]{opacity:1;display:block;transform:scaleY(1)}:host(:state(closing)) [part=menu]{opacity:0;transition:opacity var(--md-sys-motion-exp-effects-default-duration), transform var(--md-sys-motion-exp-effects-default-duration) var(--md-sys-motion-exp-effects-default);transform:scaleY(.4)}[part=items]{opacity:0;flex-direction:column;gap:2px;display:flex}:host(:state(opening)) [part=items]{opacity:1;transition:opacity 67ms linear 67ms}:host(:state(opened)) [part=items]{opacity:1}:host(:state(closing)) [part=items]{opacity:0;transition:opacity 67ms}`;

package/src/m3/toolbar-styles.css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export const toolbarStyles = css`:host{--_padding:16px;--_gap:32px;--_container-color:var(--md-sys-color-surface-container);--_on-color:var(--md-sys-color-on-surface);background-color:color-mix(in srgb, var(--_container-color) var(--_container-opacity,100%), transparent);box-sizing:border-box;color:color-mix(in srgb, var(--_on-color) var(--_on-opacity,100%), transparent);align-items:center;width:100%;height:64px;display:flex}:host([type=floating]){--_padding:12px;--_gap:4px;--_container-color:var(--md-sys-color-surface-container-high);box-shadow:none;background:0 0;width:fit-content;max-width:calc(100% - 32px)}:host([type=floating][orientation=vertical]){flex-direction:column;align-items:stretch;width:64px;min-height:auto}[part=container]{box-sizing:border-box;align-items:center;gap:var(--_gap);height:64px;padding:0 var(--_padding);flex:auto;justify-content:space-between;width:100%;display:flex}:host([type=floating]) [part=container]{background-color:color-mix(in srgb, var(--_container-color) var(--_container-opacity,100%), transparent);box-shadow:var(--md-toolbar-shadow,var(--md-sys-elevation-shadow-3));border-radius:32px;width:fit-content}[part=fab-slot]{justify-content:flex-end;align-items:center;display:flex}:host(:not([orientation=vertical])) ::slotted([slot=fab]){margin-inline-start:8px}:host([orientation=vertical]) ::slotted([slot=fab]){margin-block-start:8px}:host([type=floating][orientation=vertical]) [part=container]{height:fit-content;padding:var(--_padding) 0;flex-direction:column;width:100%}:host([type=floating]) ::slotted(md-button),:host([type=floating]) ::slotted(md-button-toggle),:host([type=floating]) ::slotted(md-icon-button),:host([type=floating]) ::slotted(md-icon-button-toggle){--md-focus-ring-shape:calc(var(--_h) / 2);border-radius:calc(var(--_h) / 2)}::slotted(md-button-toggle[variant=tonal]:not(:state(checked))),::slotted(md-icon-button-toggle[variant=tonal]:not(:state(checked))){--_background-color:transparent}:host([color=vibrant]){--_container-color:var(--md-sys-color-primary-container);--_on-color:var(--md-sys-color-on-primary-container)}:host([color=vibrant]) ::slotted(md-icon-button[variant=text]),:host([color=vibrant]) ::slotted(md-icon-button-toggle[variant=tonal]){--_text-color:var(--md-sys-color-on-primary-container)}:host([color=vibrant]) ::slotted(md-icon-button-toggle[variant=tonal]:state(checked)){--_background-color:var(--md-sys-color-surface-container);--_text-color:var(--md-sys-color-on-surface)}`;