@universal-material/web 3.0.28 → 3.0.29

package/radio/radio.d.ts

@@ -0,0 +1,24 @@
+import { PropertyValues } from '@lit/reactive-element';
+import { HTMLTemplateResult } from 'lit';
+import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
+export declare class UmRadio extends UmSelectionControl {
+    #private;
+    static styles: import("lit").CSSResult[];
+    hideStateLayer: boolean;
+    protected inputType: 'radio' | 'checkbox';
+    protected renderIndicator(): HTMLTemplateResult;
+    get checked(): boolean;
+    set checked(value: boolean);
+    constructor();
+    firstUpdated(changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private ensureOnlyOneChecked;
+    private uncheckSiblings;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-radio': UmRadio;
+    }
+}
+//# sourceMappingURL=radio.d.ts.map

package/radio/radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAI/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAGtF,qBACa,OAAQ,SAAQ,kBAAkB;;IAC7C,OAAgB,MAAM,4BAGpB;IAEuE,cAAc,UAAS;IAEhG,UAAmB,SAAS,EAAE,OAAO,GAAG,UAAU,CAAW;cAE1C,eAAe,IAAI,kBAAkB;IAIxD,IAAa,OAAO,IAGQ,OAAO,CADlC;IACD,IAAa,OAAO,CAAC,KAAK,EAAE,OAAO,EAYlC;;IAeQ,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAM9C,iBAAiB;IAKjB,oBAAoB;IAuD7B,OAAO,CAAC,oBAAoB;IAiB5B,OAAO,CAAC,eAAe;CAaxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,OAAO,CAAC;KACpB;CACF"}

package/radio/radio.js

@@ -0,0 +1,136 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _UmRadio_instances, _UmRadio_siblings_get, _UmRadio_handleKeyDown;
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
+import { styles } from './radio.styles.js';
+let UmRadio = class UmRadio extends UmSelectionControl {
+    renderIndicator() {
+        return html `<div class="indicator"></div>`;
+    }
+    get checked() {
+        return super.checked;
+    }
+    set checked(value) {
+        super.checked = value;
+        if (!value) {
+            return;
+        }
+        this.uncheckSiblings();
+        if (this.input) {
+            this.input.tabIndex = 0;
+        }
+    }
+    constructor() {
+        super();
+        _UmRadio_instances.add(this);
+        this.hideStateLayer = false;
+        this.inputType = 'radio';
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.ensureOnlyOneChecked();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('keydown', __classPrivateFieldGet(this, _UmRadio_instances, "m", _UmRadio_handleKeyDown));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('keydown', __classPrivateFieldGet(this, _UmRadio_instances, "m", _UmRadio_handleKeyDown));
+    }
+    ensureOnlyOneChecked() {
+        if (!this.name) {
+            return;
+        }
+        const radios = [...document.querySelectorAll(`${this.tagName}[name="${this.name}"]`)];
+        const lastChecked = radios
+            .reverse()
+            .find(r => r.checked);
+        if (!lastChecked) {
+            return;
+        }
+        lastChecked.checked = true;
+    }
+    uncheckSiblings() {
+        for (const radio of __classPrivateFieldGet(this, _UmRadio_instances, "a", _UmRadio_siblings_get)) {
+            if (radio === this) {
+                continue;
+            }
+            if (radio.input) {
+                radio.input.tabIndex = -1;
+            }
+            radio.checked = false;
+        }
+    }
+};
+_UmRadio_instances = new WeakSet();
+_UmRadio_siblings_get = function _UmRadio_siblings_get() {
+    if (!this.name) {
+        return [this];
+    }
+    return Array
+        .from(this.getRootNode().querySelectorAll(`${this.tagName}[name="${this.name}"]`));
+};
+_UmRadio_handleKeyDown = function _UmRadio_handleKeyDown(event) {
+    const isDown = event.key === 'ArrowDown';
+    const isUp = event.key === 'ArrowUp';
+    const isLeft = event.key === 'ArrowLeft';
+    const isRight = event.key === 'ArrowRight';
+    if (!isLeft && !isRight && !isDown && !isUp) {
+        return;
+    }
+    // Don't try to select another sibling if there aren't any.
+    const siblings = __classPrivateFieldGet(this, _UmRadio_instances, "a", _UmRadio_siblings_get);
+    if (!siblings.length) {
+        return;
+    }
+    event.preventDefault();
+    const isRtl = getComputedStyle(this).direction === 'rtl';
+    const forwards = isRtl ? isLeft || isDown : isRight || isDown;
+    const factor = forwards ? 1 : -1;
+    const thisIndex = siblings.indexOf(this);
+    let nextIndex = thisIndex + factor;
+    while (nextIndex !== thisIndex) {
+        if (nextIndex >= siblings.length) {
+            // Return to start if moving past the last item.
+            nextIndex = 0;
+        }
+        else if (nextIndex < 0) {
+            // Go to end if moving before the first item.
+            nextIndex = siblings.length - 1;
+        }
+        const nextSibling = siblings[nextIndex];
+        if (nextSibling.disabled) {
+            nextIndex += factor;
+            continue;
+        }
+        nextSibling.checked = true;
+        nextSibling.input.focus();
+        nextSibling.dispatchEvent(new Event('change', { bubbles: true }));
+        break;
+    }
+};
+UmRadio.styles = [
+    baseStyles,
+    styles
+];
+__decorate([
+    property({ type: Boolean, attribute: 'hide-state-layer', reflect: true })
+], UmRadio.prototype, "hideStateLayer", void 0);
+UmRadio = __decorate([
+    customElement('u-radio')
+], UmRadio);
+export { UmRadio };
+//# sourceMappingURL=radio.js.map

package/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { UmSelectionControl } from '../shared/selection-control/selection-control.js';\nimport { styles } from './radio.styles.js';\n\n@customElement('u-radio')\nexport class UmRadio extends UmSelectionControl {\n  static override styles = [\n    baseStyles,\n    styles\n  ];\n\n  @property({type: Boolean, attribute: 'hide-state-layer', reflect: true}) hideStateLayer = false;\n\n  protected override inputType: 'radio' | 'checkbox' = 'radio';\n\n  protected override renderIndicator(): HTMLTemplateResult {\n    return html`<div class=\"indicator\"></div>`;\n  }\n\n  override get checked() {\n    return super.checked;\n  }\n  override set checked(value: boolean) {\n    super.checked = value;\n\n    if (!value) {\n      return;\n    }\n\n    this.uncheckSiblings();\n\n    if (this.input) {\n      this.input.tabIndex = 0\n    }\n  }\n\n  get #siblings(): UmRadio[] {\n    if (!this.name) {\n      return [this];\n    }\n\n    return Array\n      .from((<Element>this.getRootNode()).querySelectorAll<UmRadio>(`${this.tagName}[name=\"${this.name}\"]`));\n  }\n\n  constructor() {\n    super();\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    this.ensureOnlyOneChecked();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.#handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.#handleKeyDown);\n  }\n\n  #handleKeyDown(event: KeyboardEvent) {\n    const isDown = event.key === 'ArrowDown';\n    const isUp = event.key === 'ArrowUp';\n    const isLeft = event.key === 'ArrowLeft';\n    const isRight = event.key === 'ArrowRight';\n\n    if (!isLeft && !isRight && !isDown && !isUp) {\n      return;\n    }\n\n    // Don't try to select another sibling if there aren't any.\n    const siblings = this.#siblings;\n\n    if (!siblings.length) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const forwards = isRtl ? isLeft || isDown : isRight || isDown;\n    const factor = forwards ? 1 : -1;\n\n    const thisIndex = siblings.indexOf(this);\n    let nextIndex = thisIndex + factor;\n\n    while (nextIndex !== thisIndex) {\n      if (nextIndex >= siblings.length) {\n        // Return to start if moving past the last item.\n        nextIndex = 0;\n      } else if (nextIndex < 0) {\n        // Go to end if moving before the first item.\n        nextIndex = siblings.length - 1;\n      }\n\n      const nextSibling = siblings[nextIndex];\n\n      if (nextSibling.disabled) {\n        nextIndex += factor;\n\n        continue;\n      }\n\n      nextSibling.checked = true;\n      nextSibling.input.focus();\n      nextSibling.dispatchEvent(new Event('change', {bubbles: true}));\n      break;\n    }\n  }\n\n  private ensureOnlyOneChecked() {\n    if (!this.name) {\n      return;\n    }\n\n    const radios = [...document.querySelectorAll<UmRadio>(`${this.tagName}[name=\"${this.name}\"]`)]\n    const lastChecked = radios\n      .reverse()\n      .find(r => r.checked);\n\n    if (!lastChecked) {\n      return;\n    }\n\n    lastChecked.checked = true;\n  }\n\n  private uncheckSiblings() {\n    for (const radio of this.#siblings) {\n      if (radio === this) {\n        continue;\n      }\n\n      if (radio.input) {\n        radio.input.tabIndex = -1;\n      }\n\n      radio.checked = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-radio': UmRadio;\n  }\n}\n"]}

package/radio/radio.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=radio.styles.d.ts.map

package/radio/radio.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.styles.d.ts","sourceRoot":"","sources":["../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA8FlB,CAAC"}

package/radio/radio.styles.js

@@ -0,0 +1,97 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --_state-layer-padding: var(--u-radio-state-layer-padding, 4px);
+    --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);
+    --_indicator-color: var(--u-radio-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .container {
+    cursor: pointer;
+    position: relative;
+    width: var(--_width);
+    height: var(--_height);
+    padding: var(--_state-layer-padding);
+    border-radius: var(--u-shape-corner-full, 9999px);
+  }
+
+  :host([hide-state-layer]) .container {
+    width: var(--_indicator-size);
+    height: var(--_indicator-size);
+    padding: 0;
+  }
+  :host([hide-state-layer]) u-ripple {
+    display: none;
+  }
+
+  input {
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    border-radius: inherit;
+    appearance: none;
+  }
+
+  u-ripple {
+    padding: var(--_state-layer-padding);
+  }
+
+  .indicator-container {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  input:checked ~ .indicator-container {
+    --_indicator-color: var(--u-radio-indicator-unselected-color, var(--u-color-primary, rgb(103, 80, 164)));
+  }
+
+  :host([disabled]) {
+    opacity: var(--u-radio-disabled-state-opacity, 0.38);
+  }
+  :host([disabled]) input,
+  :host([disabled]) .container {
+    cursor: default;
+  }
+  :host([disabled]) .indicator-container {
+    --_indicator-color: var(--u-radio-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));
+  }
+
+  :host {
+    --_indicator-size: var(--u-radio-indicator-size, 1.25rem);
+    --_width: var(--u-radio-size, 3rem);
+    --_height: var(--_width);
+  }
+
+  .indicator {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_indicator-size);
+    height: var(--_indicator-size);
+    border: var(--u-radio-indicator-border-width, 0.125rem) solid var(--_indicator-color);
+    border-radius: 50%;
+  }
+  .indicator::before {
+    content: "";
+    width: calc(var(--_indicator-size) / 2);
+    height: calc(var(--_indicator-size) / 2);
+    background: var(--_indicator-color);
+    border-radius: 50%;
+    transition: transform 250ms;
+    transform: scale3d(0, 0, 1);
+  }
+
+  input:checked ~ .indicator-container .indicator::before {
+    transform: scale3d(1, 1, 1);
+  }
+`;
+//# sourceMappingURL=radio.styles.js.map

package/radio/radio.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_state-layer-padding: var(--u-radio-state-layer-padding, 4px);\n    --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);\n    --_indicator-color: var(--u-radio-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  .container {\n    cursor: pointer;\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    padding: var(--_state-layer-padding);\n    border-radius: var(--u-shape-corner-full, 9999px);\n  }\n\n  :host([hide-state-layer]) .container {\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    padding: 0;\n  }\n  :host([hide-state-layer]) u-ripple {\n    display: none;\n  }\n\n  input {\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    border-radius: inherit;\n    appearance: none;\n  }\n\n  u-ripple {\n    padding: var(--_state-layer-padding);\n  }\n\n  .indicator-container {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  input:checked ~ .indicator-container {\n    --_indicator-color: var(--u-radio-indicator-unselected-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  :host([disabled]) {\n    opacity: var(--u-radio-disabled-state-opacity, 0.38);\n  }\n  :host([disabled]) input,\n  :host([disabled]) .container {\n    cursor: default;\n  }\n  :host([disabled]) .indicator-container {\n    --_indicator-color: var(--u-radio-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n  }\n\n  :host {\n    --_indicator-size: var(--u-radio-indicator-size, 1.25rem);\n    --_width: var(--u-radio-size, 3rem);\n    --_height: var(--_width);\n  }\n\n  .indicator {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    border: var(--u-radio-indicator-border-width, 0.125rem) solid var(--_indicator-color);\n    border-radius: 50%;\n  }\n  .indicator::before {\n    content: \"\";\n    width: calc(var(--_indicator-size) / 2);\n    height: calc(var(--_indicator-size) / 2);\n    background: var(--_indicator-color);\n    border-radius: 50%;\n    transition: transform 250ms;\n    transform: scale3d(0, 0, 1);\n  }\n\n  input:checked ~ .indicator-container .indicator::before {\n    transform: scale3d(1, 1, 1);\n  }\n`;\n"]}

package/ripple/ripple.styles.js

@@ -4,7 +4,7 @@ export const styles = css `
   .ripple-container::before {
     --_ripple-hover-color: var(--u-ripple-hover-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));
     --_ripple-pressed-color: var(--u-ripple-pressed-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));
-    --_ripple-hover-opacity: var(--u-ripple-pressed-opacity, .08);
+    --_ripple-hover-opacity: var(--u-ripple-pressed-opacity, var(--u-state-hover-opacity, 0.08));
     --_ripple-pressed-opacity: var(--u-ripple-pressed-opacity, .2);
     display: block;
     inset: 0;

package/ripple/ripple.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.styles.js","sourceRoot":"","sources":["../../src/ripple/ripple.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  .ripple-container::before {\n    --_ripple-hover-color: var(--u-ripple-hover-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));\n    --_ripple-pressed-color: var(--u-ripple-pressed-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));\n    --_ripple-hover-opacity: var(--u-ripple-pressed-opacity, .08);\n    --_ripple-pressed-opacity: var(--u-ripple-pressed-opacity, .2);\n    display: block;\n    inset: 0;\n    isolation: isolate;\n  }\n\n  .ripple-container {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: inherit;\n  }\n\n  .ripple-container::before {\n    content: \"\";\n    background: var(--_ripple-hover-color);\n    opacity: 0;\n    transition: opacity 200ms;\n  }\n\n  @media (hover: hover) {\n    :host(:not([disabled]):hover) .ripple-container::before {\n      content: \"\";\n      background: var(--_ripple-hover-color);\n      opacity: var(--_ripple-hover-opacity);\n    }\n  }\n  :host,\n  .ripple-container::before,\n  .ripple {\n    position: absolute;\n    border-radius: inherit;\n  }\n\n  .ripple {\n    top: 50%;\n    left: 50%;\n    background: var(--_ripple-pressed-color);\n    border-radius: 50%;\n    box-shadow: 0 0 64px 64px var(--_ripple-pressed-color);\n    opacity: var(--_ripple-pressed-opacity);\n    transform: scale3d(0, 0, 1);\n    pointer-events: none;\n    will-change: transform;\n  }\n  .ripple.show {\n    transition: transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) cubic-bezier(0.19, 1, 0.22, 1), opacity calc(750ms / var(--u-ripple-speed, 1));\n    transform: scale3d(1, 1, 1);\n  }\n  .ripple.show-forced {\n    transition: transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) cubic-bezier(0.19, 1, 0.22, 1), opacity calc(200ms / var(--u-ripple-speed, 1)) 300ms;\n    transform: scale3d(2, 2, 1);\n    opacity: 0;\n  }\n  .ripple.dismiss {\n    opacity: 0;\n    transform: scale3d(2, 2, 1);\n  }\n\n  ::slotted(*) {\n    position: absolute !important;\n    inset: 0;\n    border-radius: inherit;\n  }\n`;\n"]}
+{"version":3,"file":"ripple.styles.js","sourceRoot":"","sources":["../../src/ripple/ripple.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  .ripple-container::before {\n    --_ripple-hover-color: var(--u-ripple-hover-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));\n    --_ripple-pressed-color: var(--u-ripple-pressed-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));\n    --_ripple-hover-opacity: var(--u-ripple-pressed-opacity, var(--u-state-hover-opacity, 0.08));\n    --_ripple-pressed-opacity: var(--u-ripple-pressed-opacity, .2);\n    display: block;\n    inset: 0;\n    isolation: isolate;\n  }\n\n  .ripple-container {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: inherit;\n  }\n\n  .ripple-container::before {\n    content: \"\";\n    background: var(--_ripple-hover-color);\n    opacity: 0;\n    transition: opacity 200ms;\n  }\n\n  @media (hover: hover) {\n    :host(:not([disabled]):hover) .ripple-container::before {\n      content: \"\";\n      background: var(--_ripple-hover-color);\n      opacity: var(--_ripple-hover-opacity);\n    }\n  }\n  :host,\n  .ripple-container::before,\n  .ripple {\n    position: absolute;\n    border-radius: inherit;\n  }\n\n  .ripple {\n    top: 50%;\n    left: 50%;\n    background: var(--_ripple-pressed-color);\n    border-radius: 50%;\n    box-shadow: 0 0 64px 64px var(--_ripple-pressed-color);\n    opacity: var(--_ripple-pressed-opacity);\n    transform: scale3d(0, 0, 1);\n    pointer-events: none;\n    will-change: transform;\n  }\n  .ripple.show {\n    transition: transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) cubic-bezier(0.19, 1, 0.22, 1), opacity calc(750ms / var(--u-ripple-speed, 1));\n    transform: scale3d(1, 1, 1);\n  }\n  .ripple.show-forced {\n    transition: transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) cubic-bezier(0.19, 1, 0.22, 1), opacity calc(200ms / var(--u-ripple-speed, 1)) 300ms;\n    transform: scale3d(2, 2, 1);\n    opacity: 0;\n  }\n  .ripple.dismiss {\n    opacity: 0;\n    transform: scale3d(2, 2, 1);\n  }\n\n  ::slotted(*) {\n    position: absolute !important;\n    inset: 0;\n    border-radius: inherit;\n  }\n`;\n"]}

package/scss/_colors.scss

@@ -0,0 +1,2 @@
+@import "colors/text-bg";
+@import "colors/text";

package/scss/_css-vars.scss

@@ -6,23 +6,29 @@
 
 :root {
   --u-state-layer-color: currentColor;
-  --u-hover-state-layer-opacity: .08;
-  --u-focus-state-layer-opacity: .12;
-  --u-pressed-state-layer-opacity: .12;
-  --u-dragged-state-layer-opacity: .16;
-  --u-disabled-state-background-opacity: .12;
-  --u-disabled-state-label-opacity: .57;
-  --u-disabled-state-opacity: .38;
+  --u-state-layer-hover-opacity: .08;
+  --u-state-layer-focus-opacity: .12;
+  --u-state-layer-pressed-opacity: .12;
+  --u-state-layer-dragged-opacity: .16;
+
   --u-high-emphasis-opacity: 1;
   --u-low-emphasis-opacity: .75;
   --u-lower-emphasis-opacity: .5;
-  --u-color-background: #{functions.get-color-var(surface)};
-  --u-color-on-background: #{functions.get-color-var(on-surface)};
-  --u-color-background-rgb: #{functions.get-color-rgb-var(surface)};
-  --u-color-on-background-rgb: #{functions.get-color-rgb-var(on-surface)};
 
-  --u-current-text-color-rgb: var(--u-color-on-background-rgb);
+  --u-color-body: #{functions.get-color-var(surface)};
+  --u-color-on-body: #{functions.get-color-var(on-surface)};
+  --u-color-body-rgb: #{functions.get-color-rgb-var(surface)};
+  --u-color-on-body-rgb: #{functions.get-color-rgb-var(on-surface)};
+
+  --u-font-family: #{variables.$font-family};
+  --u-font-monospace: #{variables.$font-mono};
+  --u-current-text-color: var(--u-color-on-body);
+  --u-current-text-color-rgb: var(--u-color-on-body-rgb);
   --u-text-opacity: var(--u-high-emphasis-opacity);
+  --u-layout-margin: var(--u-layout-margin-default);
+  --u-layout-gutter: var(--u-layout-gutter-default);
+  --u-layout-margin-default: var(--u-spacing-medium);
+  --u-layout-gutter-default: var(--u-spacing-medium);
 
   @each $name, $value in variables.$font-weights {
     --u-font-weight-#{$name}: #{$value};
@@ -36,3 +42,11 @@
     --u-shape-corner-#{$name}: #{$value};
   }
 }
+
+@include mixins.media-breakpoint-up(sm) {
+
+  :root {
+    --u-layout-margin-default: var(--u-spacing-large);
+    --u-layout-gutter-default: var(--u-spacing-large);
+  }
+}

package/scss/_functions.scss

@@ -20,6 +20,10 @@
   @return var(--u-spacing-#{$name}, map.get(variables.$spacings, $name));
 }
 
+@function get-state-layer-opacity-var($name) {
+  @return var(--u-state-#{$name}-opacity, map.get(variables.$state-layer-opacity, $name));
+}
+
 @function hexToRgbString($hexColor) {
   @return "#{red($hexColor)},#{green($hexColor)},#{blue($hexColor)}";
 }

package/scss/_global.scss

@@ -0,0 +1,23 @@
+@use "functions";
+
+@mixin global-styles() {
+  body {
+    --u-current-text-color-rgb: var(--u-color-on-body-rgb);
+    background-color: var(--u-color-body);
+    color: rgba(var(--u-current-text-color-rgb), var(--u-text-opacity));
+  }
+
+  a {
+    --u-current-text-color: var(--u-color-primary);
+    --u-current-text-color-rgb: var(--u-color-primary-rgb);
+    color: rgba(var(--u-current-text-color-rgb), var(--u-text-opacity));
+    border-radius: #{functions.get-spacing-var(extra-small)};
+    text-decoration: none;
+
+    @media (hover: hover) {
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}

package/scss/_layout.scss

@@ -0,0 +1,5 @@
+@use "api";
+
+@import "layout/container";
+@import "layout/grid";
+@import "layout/margin-and-gutters";