@breadstone/mosaik-elements-foundation 0.0.286 → 0.0.288

package/Controls/Components/Primitives/Clickable/ClickableElement.d.ts

@@ -0,0 +1,101 @@
+import { CustomElement } from '../../Abstracts/CustomElement';
+import type { IClickableElementProps } from './IClickableElementProps';
+declare const ClickableElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Rippleable").IRippleableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Focusable").IFocusableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Variantable").IVariantableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
+/**
+ * Clickable - A layout-free interactive primitive that provides hover, ripple,
+ * focus-ring, and disabled visual effects.
+ *
+ * @description
+ * A primitive element that encapsulates interactive effects (hover, ripple, focus-ring, disabled state)
+ * without imposing any layout structure. It can be used as the interactive surface inside
+ * higher-level components such as ListItem, MenuItem, or TreeViewItem.
+ *
+ * @name Clickable
+ * @element mosaik-clickable
+ * @category Primitives
+ *
+ * @slot - Default slot for child content.
+ *
+ * @csspart focusRing - The focus ring part.
+ * @csspart ripple - The ripple part.
+ *
+ * @cssprop {String} --clickable-background-color - The background color CSS custom property.
+ * @cssprop {String} --clickable-border-color - The border color CSS custom property.
+ * @cssprop {String} --clickable-border-radius - The border radius CSS custom property.
+ * @cssprop {String} --clickable-border-style - The border style CSS custom property.
+ * @cssprop {String} --clickable-border-width - The border width CSS custom property.
+ * @cssprop {String} --clickable-focus-ring-active-width - The focus ring active width CSS custom property.
+ * @cssprop {String} --clickable-focus-ring-color - The focus ring color CSS custom property.
+ * @cssprop {String} --clickable-focus-ring-inward-offset - The focus ring inward offset CSS custom property.
+ * @cssprop {String} --clickable-focus-ring-outward-offset - The focus ring outward offset CSS custom property.
+ * @cssprop {String} --clickable-font-family - The font family CSS custom property.
+ * @cssprop {String} --clickable-font-letter-spacing - The font letter spacing CSS custom property.
+ * @cssprop {String} --clickable-font-line-height - The font line height CSS custom property.
+ * @cssprop {String} --clickable-font-size - The font size CSS custom property.
+ * @cssprop {String} --clickable-font-text-decoration - The font text decoration CSS custom property.
+ * @cssprop {String} --clickable-font-text-transform - The font text transform CSS custom property.
+ * @cssprop {String} --clickable-font-weight - The font weight CSS custom property.
+ * @cssprop {String} --clickable-gap - The gap CSS custom property.
+ * @cssprop {String} --clickable-padding-bottom - The padding bottom CSS custom property.
+ * @cssprop {String} --clickable-padding-left - The padding left CSS custom property.
+ * @cssprop {String} --clickable-padding-right - The padding right CSS custom property.
+ * @cssprop {String} --clickable-padding-top - The padding top CSS custom property.
+ * @cssprop {Color} --clickable-ripple-color - The ripple color CSS custom property.
+ * @cssprop {String} --clickable-ripple-duration - The ripple duration CSS custom property.
+ * @cssprop {String} --clickable-transition-duration - The transition duration CSS custom property.
+ * @cssprop {String} --clickable-transition-mode - The transition mode CSS custom property.
+ * @cssprop {String} --clickable-transition-property - The transition property CSS custom property.
+ * @cssprop {String} --clickable-translate - The translate CSS custom property.
+ *
+ * @dependency mosaik-focus-ring - The Focus Ring element.
+ * @dependency mosaik-ripple - The Ripple element.
+ *
+ * @example
+ * Basic clickable surface:
+ * ```html
+ * <mosaik-clickable>
+ *   <span>Click me</span>
+ * </mosaik-clickable>
+ * ```
+ *
+ * @example
+ * Disabled clickable:
+ * ```html
+ * <mosaik-clickable disabled>
+ *   <span>Cannot click</span>
+ * </mosaik-clickable>
+ * ```
+ *
+ * @public
+ */
+export declare class ClickableElement extends ClickableElement_base implements IClickableElementProps {
+    /**
+     * @public
+     */
+    constructor();
+    /**
+     * Returns the `is` property.
+     * The `is` property represents the natural name of this element.
+     *
+     * @public
+     * @static
+     * @readonly
+     */
+    static get is(): string;
+}
+/**
+ * @public
+ */
+export declare namespace ClickableElement {
+    type Props = IClickableElementProps;
+}
+/**
+ * @public
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'mosaik-clickable': ClickableElement;
+    }
+}
+export {};
+//# sourceMappingURL=ClickableElement.d.ts.map

package/Controls/Components/Primitives/Clickable/ClickableElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClickableElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Clickable/ClickableElement.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;;AAOvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,qBAUa,gBACT,SAAQ,qBACR,YAAW,sBAAsB;IAOjC;;OAEG;;IASH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;CAOJ;AAED;;GAEG;AACH,yBAAiB,gBAAgB,CAAC;IAC9B,KAAY,KAAK,GAAG,sBAAsB,CAAC;CAC9C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,gBAAgB,CAAC;KACxC;CACJ"}

package/Controls/Components/Primitives/Clickable/ClickableElement.js

@@ -0,0 +1,128 @@
+// #region Imports
+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 __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Disableable } from '../../../Behaviors/Disableable';
+import { Focusable } from '../../../Behaviors/Focusable';
+import { Rippleable } from '../../../Behaviors/Rippleable';
+import { Themeable } from '../../../Behaviors/Themeable';
+import { Variantable } from '../../../Behaviors/Variantable';
+import { Component } from '../../../Decorators/ComponentDecorator';
+import { CustomElement } from '../../Abstracts/CustomElement';
+import { clickableElementTemplate } from './ClickableElementTemplate';
+import { clickableElementCosmopolitanStyle } from './Themes/ClickableElement.Cosmopolitan';
+import { clickableElementJoyStyle } from './Themes/ClickableElement.Joy';
+import { clickableElementMemphisStyle } from './Themes/ClickableElement.Memphis';
+// #endregion
+/**
+ * Clickable - A layout-free interactive primitive that provides hover, ripple,
+ * focus-ring, and disabled visual effects.
+ *
+ * @description
+ * A primitive element that encapsulates interactive effects (hover, ripple, focus-ring, disabled state)
+ * without imposing any layout structure. It can be used as the interactive surface inside
+ * higher-level components such as ListItem, MenuItem, or TreeViewItem.
+ *
+ * @name Clickable
+ * @element mosaik-clickable
+ * @category Primitives
+ *
+ * @slot - Default slot for child content.
+ *
+ * @csspart focusRing - The focus ring part.
+ * @csspart ripple - The ripple part.
+ *
+ * @cssprop {String} --clickable-background-color - The background color CSS custom property.
+ * @cssprop {String} --clickable-border-color - The border color CSS custom property.
+ * @cssprop {String} --clickable-border-radius - The border radius CSS custom property.
+ * @cssprop {String} --clickable-border-style - The border style CSS custom property.
+ * @cssprop {String} --clickable-border-width - The border width CSS custom property.
+ * @cssprop {String} --clickable-focus-ring-active-width - The focus ring active width CSS custom property.
+ * @cssprop {String} --clickable-focus-ring-color - The focus ring color CSS custom property.
+ * @cssprop {String} --clickable-focus-ring-inward-offset - The focus ring inward offset CSS custom property.
+ * @cssprop {String} --clickable-focus-ring-outward-offset - The focus ring outward offset CSS custom property.
+ * @cssprop {String} --clickable-font-family - The font family CSS custom property.
+ * @cssprop {String} --clickable-font-letter-spacing - The font letter spacing CSS custom property.
+ * @cssprop {String} --clickable-font-line-height - The font line height CSS custom property.
+ * @cssprop {String} --clickable-font-size - The font size CSS custom property.
+ * @cssprop {String} --clickable-font-text-decoration - The font text decoration CSS custom property.
+ * @cssprop {String} --clickable-font-text-transform - The font text transform CSS custom property.
+ * @cssprop {String} --clickable-font-weight - The font weight CSS custom property.
+ * @cssprop {String} --clickable-gap - The gap CSS custom property.
+ * @cssprop {String} --clickable-padding-bottom - The padding bottom CSS custom property.
+ * @cssprop {String} --clickable-padding-left - The padding left CSS custom property.
+ * @cssprop {String} --clickable-padding-right - The padding right CSS custom property.
+ * @cssprop {String} --clickable-padding-top - The padding top CSS custom property.
+ * @cssprop {Color} --clickable-ripple-color - The ripple color CSS custom property.
+ * @cssprop {String} --clickable-ripple-duration - The ripple duration CSS custom property.
+ * @cssprop {String} --clickable-transition-duration - The transition duration CSS custom property.
+ * @cssprop {String} --clickable-transition-mode - The transition mode CSS custom property.
+ * @cssprop {String} --clickable-transition-property - The transition property CSS custom property.
+ * @cssprop {String} --clickable-translate - The translate CSS custom property.
+ *
+ * @dependency mosaik-focus-ring - The Focus Ring element.
+ * @dependency mosaik-ripple - The Ripple element.
+ *
+ * @example
+ * Basic clickable surface:
+ * ```html
+ * <mosaik-clickable>
+ *   <span>Click me</span>
+ * </mosaik-clickable>
+ * ```
+ *
+ * @example
+ * Disabled clickable:
+ * ```html
+ * <mosaik-clickable disabled>
+ *   <span>Cannot click</span>
+ * </mosaik-clickable>
+ * ```
+ *
+ * @public
+ */
+let ClickableElement = class ClickableElement extends Themeable(Rippleable(Disableable(Focusable(Variantable(CustomElement))))) {
+    // #region Fields
+    // #endregion
+    // #region Ctor
+    /**
+     * @public
+     */
+    constructor() {
+        super();
+    }
+    // #endregion
+    // #region Properties
+    /**
+     * Returns the `is` property.
+     * The `is` property represents the natural name of this element.
+     *
+     * @public
+     * @static
+     * @readonly
+     */
+    static get is() {
+        return 'mosaik-clickable';
+    }
+};
+ClickableElement = __decorate([
+    Component({
+        selector: 'mosaik-clickable',
+        template: clickableElementTemplate,
+        themes: {
+            joy: clickableElementJoyStyle,
+            memphis: clickableElementMemphisStyle,
+            cosmopolitan: clickableElementCosmopolitanStyle
+        },
+        imports: []
+    }),
+    __metadata("design:paramtypes", [])
+], ClickableElement);
+export { ClickableElement };
+//# sourceMappingURL=ClickableElement.js.map

package/Controls/Components/Primitives/Clickable/ClickableElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClickableElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Clickable/ClickableElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,iCAAiC,EAAE,MAAM,wCAAwC,CAAC;AAC3F,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAEjF,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AAWI,IAAM,gBAAgB,GAAtB,MAAM,gBACT,SAAQ,SAAS,CAAC,UAAU,CAAC,WAAW,CAAC,SAAS,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAGjF,iBAAiB;IACjB,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;IACZ,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,kBAAkB,CAAC;IAC9B,CAAC;CAOJ,CAAA;AArCY,gBAAgB;IAV5B,SAAS,CAAC;QACP,QAAQ,EAAE,kBAAkB;QAC5B,QAAQ,EAAE,wBAAwB;QAClC,MAAM,EAAE;YACJ,GAAG,EAAE,wBAAwB;YAC7B,OAAO,EAAE,4BAA4B;YACrC,YAAY,EAAE,iCAAiC;SAClD;QACD,OAAO,EAAE,EAAE;KACd,CAAC;;GACW,gBAAgB,CAqC5B"}

package/Controls/Components/Primitives/Clickable/ClickableElementTemplate.d.ts

@@ -0,0 +1,9 @@
+import { type TemplateResult } from '../../../../Dom/Html';
+import type { ClickableElement } from './ClickableElement';
+/**
+ * The template of the `ClickableElement`.
+ *
+ * @public
+ */
+export declare function clickableElementTemplate<T extends ClickableElement>(e: T): TemplateResult;
+//# sourceMappingURL=ClickableElementTemplate.d.ts.map

package/Controls/Components/Primitives/Clickable/ClickableElementTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClickableElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Clickable/ClickableElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAIjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAI3D;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,SAAS,gBAAgB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAgBzF"}

package/Controls/Components/Primitives/Clickable/ClickableElementTemplate.js

@@ -0,0 +1,27 @@
+// #region Imports
+import { html } from '../../../../Dom/Html';
+import { when } from '../../../Directives/Directives';
+// #endregion
+/**
+ * The template of the `ClickableElement`.
+ *
+ * @public
+ */
+export function clickableElementTemplate(e) {
+    return html `
+        ${when(!e.disabled, () => html `
+        <mosaik-focus-ring part="focusRing"
+                           .variant="${e.variant}"
+                           .visible="${e.isFocused}"
+                           .controlled="${'manual'}"
+                           @connected="${(evt) => evt.target.attach(e)}"></mosaik-focus-ring>
+        `)}
+        ${when(!e.disabled && e.ripple, () => html `
+        <mosaik-ripple part="ripple"
+                       .variant="${e.variant}"
+                       @connected="${(evt) => evt.target.attach(e)}"></mosaik-ripple>
+        `)}
+        <slot></slot>
+    `;
+}
+//# sourceMappingURL=ClickableElementTemplate.js.map

package/Controls/Components/Primitives/Clickable/ClickableElementTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClickableElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Clickable/ClickableElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAKtD,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,wBAAwB,CAA6B,CAAI;IACrE,OAAO,IAAI,CAAA;UACL,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;uCAEC,CAAC,CAAC,OAAO;uCACT,CAAC,CAAC,SAAS;0CACR,QAAQ;yCACT,CAAC,GAAU,EAAE,EAAE,CAAE,GAAG,CAAC,MAA2B,CAAC,MAAM,CAAC,CAAC,CAAC;SAC1F,CAAC;UACA,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;mCAEf,CAAC,CAAC,OAAO;qCACP,CAAC,GAAU,EAAE,EAAE,CAAE,GAAG,CAAC,MAAwB,CAAC,MAAM,CAAC,CAAC,CAAC;SACnF,CAAC;;KAEL,CAAC;AACN,CAAC"}

package/Controls/Components/Primitives/Clickable/IClickableElementProps.d.ts

@@ -0,0 +1,12 @@
+import type { IDisableableProps } from '../../../Behaviors/Disableable';
+import type { IFocusableProps } from '../../../Behaviors/Focusable';
+import type { IRippleableProps } from '../../../Behaviors/Rippleable';
+import type { IVariantableProps } from '../../../Behaviors/Variantable';
+/**
+ * Represents the `IClickableElementProps` interface.
+ *
+ * @public
+ */
+export interface IClickableElementProps extends IDisableableProps, IRippleableProps, IFocusableProps, IVariantableProps {
+}
+//# sourceMappingURL=IClickableElementProps.d.ts.map

package/Controls/Components/Primitives/Clickable/IClickableElementProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IClickableElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Clickable/IClickableElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAIxE;;;;GAIG;AACH,MAAM,WAAW,sBACb,SAAQ,iBAAiB,EAAE,gBAAgB,EAAE,eAAe,EAAE,iBAAiB;CAElF"}

package/Controls/Components/Primitives/Clickable/IClickableElementProps.js

@@ -0,0 +1,3 @@
+// #region Imports
+export {};
+//# sourceMappingURL=IClickableElementProps.js.map

package/Controls/Components/Primitives/Clickable/IClickableElementProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IClickableElementProps.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/Clickable/IClickableElementProps.ts"],"names":[],"mappings":"AAAA,kBAAkB"}

package/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Cosmopolitan.d.ts

@@ -0,0 +1,6 @@
+import { type CSSResult } from '../../../../../Dom/Css';
+/**
+ * @public
+ */
+export declare function clickableElementCosmopolitanStyle(): CSSResult;
+//# sourceMappingURL=ClickableElement.Cosmopolitan.d.ts.map

package/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Cosmopolitan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClickableElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,iCAAiC,IAAI,SAAS,CAmF7D"}

package/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Cosmopolitan.js

@@ -0,0 +1,97 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+// #region Imports
+import { css } from '../../../../../Dom/Css';
+// #endregion
+/**
+ * @public
+ */
+export function clickableElementCosmopolitanStyle() {
+    return css `
+:host {
+  --clickable-background-color: transparent;
+  --clickable-border-color: unset;
+  --clickable-border-radius: var(--cosmopolitan-layout-radius);
+  --clickable-border-style: solid;
+  --clickable-border-width: unset;
+  --clickable-focus-ring-active-width: 8px;
+  --clickable-focus-ring-color: unset;
+  --clickable-focus-ring-inward-offset: 2px;
+  --clickable-focus-ring-outward-offset: 2px;
+  --clickable-font-family: unset;
+  --clickable-font-letter-spacing: unset;
+  --clickable-font-line-height: unset;
+  --clickable-font-size: unset;
+  --clickable-font-text-decoration: unset;
+  --clickable-font-text-transform: unset;
+  --clickable-font-weight: unset;
+  --clickable-gap: unset;
+  --clickable-padding-bottom: 0;
+  --clickable-padding-left: 0;
+  --clickable-padding-right: 0;
+  --clickable-padding-top: 0;
+  --clickable-ripple-color: unset;
+  --clickable-ripple-duration: .2s;
+  --clickable-transition-duration: var(--cosmopolitan-duration-short);
+  --clickable-transition-mode: ease;
+  --clickable-transition-property: background-color;
+  --clickable-translate: unset;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: .01ms;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+}
+
+:host *, :host :before, :host :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:host :before, :host :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host {
+  background-color: var(--clickable-background-color);
+  border-radius: var(--clickable-border-radius);
+  padding-top: var(--clickable-padding-top);
+  padding-right: var(--clickable-padding-right);
+  padding-bottom: var(--clickable-padding-bottom);
+  padding-left: var(--clickable-padding-left);
+  transition-duration: var(--clickable-transition-duration);
+  transition-timing-function: var(--clickable-transition-mode);
+  transition-property: var(--clickable-transition-property);
+  cursor: pointer;
+  overflow: hidden;
+}
+
+:host([disabled]:not([disabled="false"])) {
+  pointer-events: none;
+  opacity: .38;
+  cursor: default;
+}
+
+:host(:not([disabled]:not([disabled="false"])):hover) {
+  --clickable-background-color: var(--cosmopolitan-scheme-highlight);
+}
+
+    `;
+}
+//# sourceMappingURL=ClickableElement.Cosmopolitan.js.map

package/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Cosmopolitan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClickableElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,iCAAiC;IAC7C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiFT,CAAC;AACN,CAAC"}

package/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Joy.d.ts

@@ -0,0 +1,6 @@
+import { type CSSResult } from '../../../../../Dom/Css';
+/**
+ * @public
+ */
+export declare function clickableElementJoyStyle(): CSSResult;
+//# sourceMappingURL=ClickableElement.Joy.d.ts.map

package/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Joy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClickableElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CAmFpD"}

package/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Joy.js

@@ -0,0 +1,97 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+// #region Imports
+import { css } from '../../../../../Dom/Css';
+// #endregion
+/**
+ * @public
+ */
+export function clickableElementJoyStyle() {
+    return css `
+:host {
+  --clickable-background-color: transparent;
+  --clickable-border-color: unset;
+  --clickable-border-radius: var(--joy-layout-radius);
+  --clickable-border-style: solid;
+  --clickable-border-width: unset;
+  --clickable-focus-ring-active-width: 8px;
+  --clickable-focus-ring-color: unset;
+  --clickable-focus-ring-inward-offset: 2px;
+  --clickable-focus-ring-outward-offset: 2px;
+  --clickable-font-family: unset;
+  --clickable-font-letter-spacing: unset;
+  --clickable-font-line-height: unset;
+  --clickable-font-size: unset;
+  --clickable-font-text-decoration: unset;
+  --clickable-font-text-transform: unset;
+  --clickable-font-weight: unset;
+  --clickable-gap: unset;
+  --clickable-padding-bottom: var(--joy-layout-space);
+  --clickable-padding-left: calc(var(--joy-layout-space) * 2);
+  --clickable-padding-right: calc(var(--joy-layout-space) * 2);
+  --clickable-padding-top: var(--joy-layout-space);
+  --clickable-ripple-color: unset;
+  --clickable-ripple-duration: .2s;
+  --clickable-transition-duration: var(--joy-duration-short);
+  --clickable-transition-mode: ease;
+  --clickable-transition-property: border-color, background-color;
+  --clickable-translate: unset;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: .01ms;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+}
+
+:host *, :host :before, :host :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:host :before, :host :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host {
+  background-color: var(--clickable-background-color);
+  border-radius: var(--clickable-border-radius);
+  padding-top: var(--clickable-padding-top);
+  padding-right: var(--clickable-padding-right);
+  padding-bottom: var(--clickable-padding-bottom);
+  padding-left: var(--clickable-padding-left);
+  transition-duration: var(--clickable-transition-duration);
+  transition-timing-function: var(--clickable-transition-mode);
+  transition-property: var(--clickable-transition-property);
+  cursor: pointer;
+  overflow: hidden;
+}
+
+:host([disabled]:not([disabled="false"])) {
+  pointer-events: none;
+  opacity: .38;
+  cursor: default;
+}
+
+:host(:not([disabled]:not([disabled="false"])):hover) {
+  --clickable-background-color: var(--joy-scheme-highlight);
+}
+
+    `;
+}
+//# sourceMappingURL=ClickableElement.Joy.js.map

package/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Joy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClickableElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,wBAAwB;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiFT,CAAC;AACN,CAAC"}

package/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Memphis.d.ts

@@ -0,0 +1,6 @@
+import { type CSSResult } from '../../../../../Dom/Css';
+/**
+ * @public
+ */
+export declare function clickableElementMemphisStyle(): CSSResult;
+//# sourceMappingURL=ClickableElement.Memphis.d.ts.map

package/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Memphis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClickableElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,4BAA4B,IAAI,SAAS,CAmFxD"}

package/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Memphis.js

@@ -0,0 +1,97 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+// #region Imports
+import { css } from '../../../../../Dom/Css';
+// #endregion
+/**
+ * @public
+ */
+export function clickableElementMemphisStyle() {
+    return css `
+:host {
+  --clickable-background-color: transparent;
+  --clickable-border-color: unset;
+  --clickable-border-radius: var(--memphis-layout-radius);
+  --clickable-border-style: solid;
+  --clickable-border-width: unset;
+  --clickable-focus-ring-active-width: 8px;
+  --clickable-focus-ring-color: unset;
+  --clickable-focus-ring-inward-offset: 2px;
+  --clickable-focus-ring-outward-offset: 2px;
+  --clickable-font-family: unset;
+  --clickable-font-letter-spacing: unset;
+  --clickable-font-line-height: unset;
+  --clickable-font-size: unset;
+  --clickable-font-text-decoration: unset;
+  --clickable-font-text-transform: unset;
+  --clickable-font-weight: unset;
+  --clickable-gap: unset;
+  --clickable-padding-bottom: 0;
+  --clickable-padding-left: 0;
+  --clickable-padding-right: 0;
+  --clickable-padding-top: 0;
+  --clickable-ripple-color: unset;
+  --clickable-ripple-duration: .2s;
+  --clickable-transition-duration: var(--memphis-duration-short);
+  --clickable-transition-mode: ease;
+  --clickable-transition-property: background-color;
+  --clickable-translate: unset;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: .01ms;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+}
+
+:host *, :host :before, :host :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:host :before, :host :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host {
+  background-color: var(--clickable-background-color);
+  border-radius: var(--clickable-border-radius);
+  padding-top: var(--clickable-padding-top);
+  padding-right: var(--clickable-padding-right);
+  padding-bottom: var(--clickable-padding-bottom);
+  padding-left: var(--clickable-padding-left);
+  transition-duration: var(--clickable-transition-duration);
+  transition-timing-function: var(--clickable-transition-mode);
+  transition-property: var(--clickable-transition-property);
+  cursor: pointer;
+  overflow: hidden;
+}
+
+:host([disabled]:not([disabled="false"])) {
+  pointer-events: none;
+  opacity: .38;
+  cursor: default;
+}
+
+:host(:not([disabled]:not([disabled="false"])):hover) {
+  --clickable-background-color: var(--memphis-scheme-highlight);
+}
+
+    `;
+}
+//# sourceMappingURL=ClickableElement.Memphis.js.map

package/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Memphis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClickableElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Clickable/Themes/ClickableElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,4BAA4B;IACxC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiFT,CAAC;AACN,CAAC"}

package/Controls/Components/Primitives/Skeleton/Themes/SkeletonElement.Joy.js

@@ -119,7 +119,7 @@ export function skeletonElementJoyStyle() {
 }
 
 :host([shimmer]) [part="shimmer"]:after {
-  background: linear-gradient(90deg, var(--joy-scheme-semi-transparent) 25%, var(--joy-scheme-background) 37%, var(--joy-scheme-semi-transparent) 63%);
+  background: linear-gradient(90deg, var(--joy-scheme-semi-transparent) 25%, var(--joy-scheme-surface) 37%, var(--joy-scheme-semi-transparent) 63%);
   animation: elastic-shimmer calc(var(--joy-duration-long) * 3) cubic-bezier(.4, 0, .2, 1) infinite;
 }