@breadstone/mosaik-elements-foundation 0.0.222 → 0.0.224

package/Controls/Components/Inputs/ChipBox/Themes/ChipBoxElement.Joy.js

@@ -13,29 +13,32 @@ import { css } from '../../../../../Dom/Css';
 export function chipBoxElementJoyStyle() {
     return css `
 :host {
-  --chipbox-background-color: unset;
-  --chipbox-border-color: unset;
-  --chipbox-border-radius: unset;
-  --chipbox-border-style: unset;
-  --chipbox-border-width: unset;
-  --chipbox-font-family: unset;
+  --chipbox-background-color: var(--joy-scheme-background);
+  --chipbox-border-color: var(--joy-scheme-highlight);
+  --chipbox-border-radius: var(--joy-layout-radius);
+  --chipbox-border-style: solid;
+  --chipbox-border-width: var(--joy-layout-thickness);
+  --chipbox-focus-ring-outward-offset: 0px;
+  --chipbox-font-family: var(--joy-font-family);
   --chipbox-font-letter-spacing: unset;
   --chipbox-font-line-height: unset;
-  --chipbox-font-size: unset;
+  --chipbox-font-size: 16px;
   --chipbox-font-text-decoration: unset;
   --chipbox-font-text-transform: unset;
-  --chipbox-font-weight: unset;
-  --chipbox-foreground-color: unset;
+  --chipbox-font-weight: normal;
+  --chipbox-foreground-color: var(--joy-scheme-foreground);
   --chipbox-gap: var(--joy-layout-space);
   --chipbox-height: 56px;
   --chipbox-padding-bottom: var(--joy-layout-space);
   --chipbox-padding-left: calc(var(--joy-layout-space) * 1.5);
   --chipbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --chipbox-padding-top: var(--joy-layout-space);
-  --chipbox-shadow: unset;
-  --chipbox-transition-duration: unset;
-  --chipbox-transition-mode: unset;
-  --chipbox-transition-property: unset;
+  --chipbox-prefix-icon-size: 20px;
+  --chipbox-shadow: var(--joy-elevation-none);
+  --chipbox-suffix-icon-size: 20px;
+  --chipbox-transition-duration: var(--joy-duration-short);
+  --chipbox-transition-mode: ease;
+  --chipbox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --chipbox-translate: unset;
 }
 
@@ -99,64 +102,18 @@ export function chipBoxElementJoyStyle() {
   border-width: var(--chipbox-border-width);
   border-radius: var(--chipbox-border-radius);
   border-style: var(--chipbox-border-style);
-  box-shadow: var(--chipbox-shadow);
   min-height: var(--chipbox-height);
   cursor: text;
   z-index: 0;
   outline: none;
   flex-direction: row;
   align-items: center;
-  padding: 4px;
   display: flex;
 }
 
-:host [part="suffix"] {
-  gap: var(--chipbox-gap);
-  flex-grow: 0;
-  flex-shrink: 0;
-  align-items: center;
-  display: flex;
-}
-
-:host [part="suffix"][hidden] {
-  display: none;
-}
-
-:host [part="prefix"] {
-  gap: var(--chipbox-gap);
-  flex-grow: 0;
-  flex-shrink: 0;
-  align-items: center;
-  display: flex;
-}
-
-:host [part="prefix"][hidden] {
-  display: none;
-}
-
-:host [part="inner"] {
-  width: 100%;
-  height: 100%;
-  padding: var(--chipbox-padding-top) var(--chipbox-padding-right) var(--chipbox-padding-bottom) var(--chipbox-padding-left);
-  flex-direction: column;
-  flex: 1;
-  display: flex;
-  position: relative;
-  overflow: hidden;
-}
-
-:host [part="inner"] [part="wrapper"] {
-  place-content: flex-start;
-  gap: var(--chipbox-gap);
-  flex-flow: wrap;
-  display: flex;
-}
-
-:host [part="inner"] [part="wrapper"] [part="chip"] {
-  flex-basis: unset;
-}
-
 :host [part="input"] {
+  transition-duration: inherit;
+  transition-timing-function: inherit;
   color: inherit;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -164,8 +121,10 @@ export function chipBoxElementJoyStyle() {
   background: none;
   border: none;
   outline: none;
+  width: 100%;
   margin: 0;
   padding: 0;
+  transition-property: inherit;
 }
 
 :host [part="label"] {
@@ -184,7 +143,6 @@ export function chipBoxElementJoyStyle() {
   display: block;
   position: absolute;
   top: 10px;
-  left: 12px;
   overflow: hidden;
   transform: translateY(0);
 }
@@ -195,6 +153,54 @@ export function chipBoxElementJoyStyle() {
   transform: translateY(-50%);
 }
 
+:host [part="suffix"], :host [part="prefix"] {
+  gap: var(--chipbox-gap);
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="suffix"][hidden], :host [part="prefix"][hidden] {
+  display: none;
+}
+
+:host [part="suffix"] {
+  --icon-size: var(--chipbox-suffix-icon-size);
+}
+
+:host [part="prefix"] {
+  --icon-size: var(--chipbox-prefix-icon-size);
+}
+
+:host [part="inner"] {
+  width: 100%;
+  height: 100%;
+  padding: var(--chipbox-padding-top) var(--chipbox-padding-right) var(--chipbox-padding-bottom) var(--chipbox-padding-left);
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+:host [part="inner"] [part="wrapper"] {
+  place-content: flex-start;
+  gap: var(--chipbox-gap);
+  flex-flow: wrap;
+  display: flex;
+}
+
+:host [part="inner"] [part="wrapper"] [part="chip"] {
+  flex-basis: unset;
+}
+
+:host [part="clear"] {
+  --button-icon-min-width: 36px;
+  --button-icon-min-height: 36px;
+  --icon-size: 20px;
+}
+
 :host([has-label]) [part="inner"] [part="wrapper"] {
   padding-top: 12px;
 }
@@ -203,33 +209,45 @@ export function chipBoxElementJoyStyle() {
   padding-bottom: unset;
 }
 
+:host([disabled]:not([disabled="false"])) {
+  cursor: default;
+}
+
 :host([required]) [part="label"]:after {
   content: "*";
   margin-left: 2px;
 }
 
-:host [part="input"]::-moz-selection {
+:host {
+  --chipbox-shadow-color: var(--joy-scheme-highlight);
+}
+
+:host [part="label"] {
+  color: var(--joy-scheme-middlelight);
+}
+
+:host [part="inner"] [part="input"]::-moz-selection {
   background-color: var(--joy-scheme-selection);
 }
 
-:host [part="input"]::selection {
+:host [part="inner"] [part="input"]::selection {
   background-color: var(--joy-scheme-selection);
 }
 
-:host [part="input"] ::-moz-placeholder {
+:host [part="inner"] [part="input"] ::-moz-placeholder {
   color: var(--joy-scheme-middlelight);
 }
 
-:host [part="input"] ::placeholder {
+:host [part="inner"] [part="input"] ::placeholder {
   color: var(--joy-scheme-middlelight);
 }
 
-:host [part="label"] {
-  color: var(--joy-scheme-middlelight);
+:host([disabled]:not([disabled="false"])), :host([readonly]) {
+  cursor: default;
+  --chipbox-border-color: var(--joy-scheme-disabled);
 }
 
 :host([disabled]:not([disabled="false"])) {
-  cursor: default;
   --chipbox-border-color: var(--joy-scheme-disabled);
   --chipbox-background-color: var(--joy-scheme-semi-transparent);
   --chipbox-foreground-color: var(--joy-scheme-disabled);
@@ -240,6 +258,19 @@ export function chipBoxElementJoyStyle() {
   --chipbox-foreground-color: var(--joy-color-danger-500);
 }
 
+:host([appearance="plain"]) {
+  --chipbox-border-width: 0;
+  --chipbox-background-color: var(--joy-scheme-transparent);
+}
+
+:host([appearance="plain"]) [part="focusRing"] {
+  --focus-ring-outward-offset: 0px;
+}
+
+:host([appearance="soft"]), :host([appearance="solid"]) {
+  --chipbox-background-color: var(--joy-scheme-highlight);
+}
+
 :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
   --chipbox-border-color: var(--joy-color-primary-500);
 }
@@ -384,15 +415,6 @@ export function chipBoxElementJoyStyle() {
   color: var(--joy-color-neutral-500);
 }
 
-:host([appearance="plain"]) {
-  --chipbox-border-width: 0;
-  --chipbox-background-color: var(--joy-scheme-transparent);
-}
-
-:host([appearance="soft"]), :host([appearance="solid"]) {
-  --chipbox-background-color: var(--joy-scheme-highlight);
-}
-
     `;
 }
 //# sourceMappingURL=ChipBoxElement.Joy.js.map

package/Controls/Components/Inputs/ChipBox/Themes/ChipBoxElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipBoxElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/ChipBox/Themes/ChipBoxElement.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,sBAAsB;IAClC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8XT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ChipBoxElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/ChipBox/Themes/ChipBoxElement.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,sBAAsB;IAClC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoZT,CAAC;AACN,CAAC"}

package/Controls/Components/Inputs/ChipBox/Themes/ChipBoxElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChipBoxElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/ChipBox/Themes/ChipBoxElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CAuMtD"}
+{"version":3,"file":"ChipBoxElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/ChipBox/Themes/ChipBoxElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CA8NtD"}

package/Controls/Components/Inputs/ChipBox/Themes/ChipBoxElement.Memphis.js

@@ -13,30 +13,37 @@ import { css } from '../../../../../Dom/Css';
 export function chipBoxElementMemphisStyle() {
     return css `
 :host {
-  --chipbox-background-color: unset;
-  --chipbox-border-color: unset;
-  --chipbox-border-radius: unset;
-  --chipbox-border-style: unset;
-  --chipbox-border-width: unset;
-  --chipbox-font-family: unset;
+  --chipbox-background-color: var(--memphis-scheme-background);
+  --chipbox-border-color: var(--memphis-scheme-contrast);
+  --chipbox-border-radius: var(--memphis-layout-radius);
+  --chipbox-border-style: solid;
+  --chipbox-border-width: var(--memphis-layout-thickness);
+  --chipbox-focus-ring-width: 0px;
+  --chipbox-font-family: var(--memphis-font-family);
   --chipbox-font-letter-spacing: unset;
   --chipbox-font-line-height: unset;
-  --chipbox-font-size: unset;
+  --chipbox-font-size: var(--memphis-typography-body1-font-size);
   --chipbox-font-text-decoration: unset;
   --chipbox-font-text-transform: unset;
-  --chipbox-font-weight: unset;
-  --chipbox-foreground-color: unset;
-  --chipbox-gap: unset;
-  --chipbox-height: unset;
-  --chipbox-padding-bottom: unset;
-  --chipbox-padding-left: unset;
-  --chipbox-padding-right: unset;
-  --chipbox-padding-top: unset;
-  --chipbox-shadow: unset;
-  --chipbox-transition-duration: unset;
-  --chipbox-transition-mode: unset;
-  --chipbox-transition-property: unset;
-  --chipbox-translate: unset;
+  --chipbox-font-weight: var(--memphis-typography-body1-font-weight);
+  --chipbox-foreground-color: var(--memphis-scheme-foreground);
+  --chipbox-gap: var(--memphis-layout-space);
+  --chipbox-height: 56px;
+  --chipbox-padding-bottom: var(--memphis-layout-space);
+  --chipbox-padding-left: calc(var(--memphis-layout-space) * 1.5);
+  --chipbox-padding-right: calc(var(--memphis-layout-space) * 1.5);
+  --chipbox-padding-top: var(--memphis-layout-space);
+  --chipbox-prefix-icon-size: 20px;
+  --chipbox-shadow-blur: var(--memphis-elevation-semilight-blur-0);
+  --chipbox-shadow-color: var(--memphis-elevation-semilight-color-0);
+  --chipbox-shadow-offset-x: var(--memphis-elevation-semilight-offset-x-0);
+  --chipbox-shadow-offset-y: var(--memphis-elevation-semilight-offset-y-0);
+  --chipbox-shadow-spread: var(--memphis-elevation-semilight-spread-0);
+  --chipbox-suffix-icon-size: 20px;
+  --chipbox-transition-duration: .2s;
+  --chipbox-transition-mode: ease;
+  --chipbox-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
+  --chipbox-translate: none;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -99,64 +106,18 @@ export function chipBoxElementMemphisStyle() {
   border-width: var(--chipbox-border-width);
   border-radius: var(--chipbox-border-radius);
   border-style: var(--chipbox-border-style);
-  box-shadow: var(--chipbox-shadow);
   min-height: var(--chipbox-height);
   cursor: text;
   z-index: 0;
   outline: none;
   flex-direction: row;
   align-items: center;
-  padding: 4px;
   display: flex;
 }
 
-:host [part="suffix"] {
-  gap: var(--chipbox-gap);
-  flex-grow: 0;
-  flex-shrink: 0;
-  align-items: center;
-  display: flex;
-}
-
-:host [part="suffix"][hidden] {
-  display: none;
-}
-
-:host [part="prefix"] {
-  gap: var(--chipbox-gap);
-  flex-grow: 0;
-  flex-shrink: 0;
-  align-items: center;
-  display: flex;
-}
-
-:host [part="prefix"][hidden] {
-  display: none;
-}
-
-:host [part="inner"] {
-  width: 100%;
-  height: 100%;
-  padding: var(--chipbox-padding-top) var(--chipbox-padding-right) var(--chipbox-padding-bottom) var(--chipbox-padding-left);
-  flex-direction: column;
-  flex: 1;
-  display: flex;
-  position: relative;
-  overflow: hidden;
-}
-
-:host [part="inner"] [part="wrapper"] {
-  place-content: flex-start;
-  gap: var(--chipbox-gap);
-  flex-flow: wrap;
-  display: flex;
-}
-
-:host [part="inner"] [part="wrapper"] [part="chip"] {
-  flex-basis: unset;
-}
-
 :host [part="input"] {
+  transition-duration: inherit;
+  transition-timing-function: inherit;
   color: inherit;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -164,8 +125,10 @@ export function chipBoxElementMemphisStyle() {
   background: none;
   border: none;
   outline: none;
+  width: 100%;
   margin: 0;
   padding: 0;
+  transition-property: inherit;
 }
 
 :host [part="label"] {
@@ -184,7 +147,6 @@ export function chipBoxElementMemphisStyle() {
   display: block;
   position: absolute;
   top: 10px;
-  left: 12px;
   overflow: hidden;
   transform: translateY(0);
 }
@@ -195,6 +157,54 @@ export function chipBoxElementMemphisStyle() {
   transform: translateY(-50%);
 }
 
+:host [part="suffix"], :host [part="prefix"] {
+  gap: var(--chipbox-gap);
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="suffix"][hidden], :host [part="prefix"][hidden] {
+  display: none;
+}
+
+:host [part="suffix"] {
+  --icon-size: var(--chipbox-suffix-icon-size);
+}
+
+:host [part="prefix"] {
+  --icon-size: var(--chipbox-prefix-icon-size);
+}
+
+:host [part="inner"] {
+  width: 100%;
+  height: 100%;
+  padding: var(--chipbox-padding-top) var(--chipbox-padding-right) var(--chipbox-padding-bottom) var(--chipbox-padding-left);
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+:host [part="inner"] [part="wrapper"] {
+  place-content: flex-start;
+  gap: var(--chipbox-gap);
+  flex-flow: wrap;
+  display: flex;
+}
+
+:host [part="inner"] [part="wrapper"] [part="chip"] {
+  flex-basis: unset;
+}
+
+:host [part="clear"] {
+  --button-icon-min-width: 36px;
+  --button-icon-min-height: 36px;
+  --icon-size: 20px;
+}
+
 :host([has-label]) [part="inner"] [part="wrapper"] {
   padding-top: 12px;
 }
@@ -203,11 +213,24 @@ export function chipBoxElementMemphisStyle() {
   padding-bottom: unset;
 }
 
+:host([disabled]:not([disabled="false"])) {
+  cursor: default;
+}
+
 :host([required]) [part="label"]:after {
   content: "*";
   margin-left: 2px;
 }
 
+:host {
+  --chipbox-shadow-color: var(--memphis-scheme-highlight);
+  box-shadow: var(--chipbox-shadow-offset-x) var(--chipbox-shadow-offset-y) var(--chipbox-shadow-blur) var(--chipbox-shadow-spread) var(--chipbox-shadow-color);
+}
+
+:host [part="focusRing"] {
+  --focus-ring-width: var(--chipbox-focus-ring-width);
+}
+
     `;
 }
 //# sourceMappingURL=ChipBoxElement.Memphis.js.map

package/Controls/Components/Inputs/ChipBox/Themes/ChipBoxElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipBoxElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/ChipBox/Themes/ChipBoxElement.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,0BAA0B;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqMT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ChipBoxElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/ChipBox/Themes/ChipBoxElement.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,0BAA0B;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4NT,CAAC;AACN,CAAC"}

package/Controls/Components/Inputs/Choice/ChoiceElement.d.ts

@@ -1,5 +1,8 @@
 import { type IInvalidable } from '../../../Behaviors/Invalidable';
+import type { Appearance } from '../../../Types/Appearance';
+import type { FlowDirection } from '../../../Types/FlowDirection';
 import { IconPosition } from '../../../Types/IconPosition';
+import type { Variant } from '../../../Types/Variant';
 import { ToggableElement } from '../../Primitives/Abstracts/Toggable/ToggableElement';
 import type { IChoiceElementProps } from './IChoiceElementProps';
 declare const ChoiceElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => IInvalidable & import("../../../Behaviors/Invalidable").IInvalidableProps<unknown>) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Labelable").ILabelableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Valueable").IValueableProps<unknown>) & (abstract new (...args: Array<any>) => import("../../../Behaviors/TextFormattable").ITextFormattableProps) & typeof ToggableElement & import("../../../Behaviors/Themeable").IThemeableCtor;
@@ -23,6 +26,7 @@ declare const ChoiceElement_base: (abstract new (...args: Array<any>) => import(
  * @public
  */
 export declare class ChoiceElement extends ChoiceElement_base implements IChoiceElementProps, IInvalidable {
+    private readonly _inheritance;
     private _inputElement;
     private _name;
     private _additional;
@@ -43,8 +47,36 @@ export declare class ChoiceElement extends ChoiceElement_base implements IChoice
      * @readonly
      */
     static get is(): string;
+    /**
+     * @public
+     * @override
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /**
+     * @public
+     * @override
+     */
+    get appearance(): Appearance;
+    set appearance(value: Appearance);
+    /**
+     * @public
+     * @override
+     */
+    get variant(): Variant;
+    set variant(value: Variant);
+    /**
+     * Gets or sets the `dir` property.
+     * When used inside a ChoiceGroup, inherits the group's dir unless explicitly set.
+     *
+     * @public
+     * @override
+     */
+    get dir(): FlowDirection;
+    set dir(value: FlowDirection);
     /**
      * Gets or sets the `name` property.
+     * When used inside a ChoiceGroup, inherits the group's name unless explicitly set.
      *
      * @public
      * @attr

package/Controls/Components/Inputs/Choice/ChoiceElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Inputs/Choice/ChoiceElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,KAAK,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAMhF,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AAKtF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AASjE;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAmBa,aACT,SAAQ,kBACR,YAAW,mBAAmB,EAAE,YAAY;IAI5C,OAAO,CAAC,aAAa,CAAoB;IACzC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,aAAa,CAAe;IAMpC;;OAEG;;IAeH;;;;;;;;OAQG;IACH,WAA2B,EAAE,IAAI,MAAM,CAEtC;IAED;;;;;OAKG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAK5B;IAED;;;;;OAKG;IACH,IACW,UAAU,IAAI,MAAM,CAE9B;IAED,IAAW,UAAU,CAAC,KAAK,EAAE,MAAM,EAKlC;IAED;;;;;OAKG;IACH,IAIW,QAAQ,IAAI,OAAO,CAE7B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAKjC;IAED;;;;;OAKG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAK5B;IAED;;;;;OAKG;IACH,IACW,YAAY,IAAI,YAAY,CAEtC;IAED,IAAW,YAAY,CAAC,KAAK,EAAE,YAAY,EAK1C;IAMD;;;OAGG;IACa,iBAAiB,IAAI,IAAI;IAezC;;;;OAIG;IACI,KAAK,IAAI,IAAI;IAKpB;;;;;OAKG;IACa,aAAa,IAAI,OAAO;IAMxC;;;OAGG;IACa,KAAK,IAAI,IAAI;IAS7B;;;OAGG;IACa,OAAO,IAAI,IAAI;IAS/B;;;OAGG;IACa,MAAM,IAAI,IAAI;IAS9B;;;OAGG;cACgB,eAAe,IAAI,IAAI;CAQ7C;AAED;;GAEG;AACH,yBAAiB,aAAa,CAAC;IAC3B,KAAY,KAAK,GAAG,mBAAmB,CAAC;CAC3C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,eAAe,EAAE,aAAa,CAAC;KAClC;CACJ"}
+{"version":3,"file":"ChoiceElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Inputs/Choice/ChoiceElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,KAAK,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAShF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AAMtF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAOjE;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAmBa,aACT,SAAQ,kBACR,YAAW,mBAAmB,EAAE,YAAY;IAI5C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAE1B;IACH,OAAO,CAAC,aAAa,CAAoB;IACzC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,aAAa,CAAe;IAMpC;;OAEG;;IAeH;;;;;;;;OAQG;IACH,WAA2B,EAAE,IAAI,MAAM,CAEtC;IAED;;;OAGG;IACH,IAAoB,QAAQ,IAAI,OAAO,CAEtC;IACD,IAAoB,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1C;IAED;;;OAGG;IACH,IAAoB,UAAU,IAAI,UAAU,CAE3C;IACD,IAAoB,UAAU,CAAC,KAAK,EAAE,UAAU,EAG/C;IAED;;;OAGG;IACH,IAAoB,OAAO,IAAI,OAAO,CAErC;IACD,IAAoB,OAAO,CAAC,KAAK,EAAE,OAAO,EAGzC;IAED;;;;;;OAMG;IACH,IAAoB,GAAG,IAAI,aAAa,CAEvC;IACD,IAAoB,GAAG,CAAC,KAAK,EAAE,aAAa,EAG3C;IAED;;;;;;OAMG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAM5B;IAED;;;;;OAKG;IACH,IACW,UAAU,IAAI,MAAM,CAE9B;IAED,IAAW,UAAU,CAAC,KAAK,EAAE,MAAM,EAKlC;IAED;;;;;OAKG;IACH,IAIW,QAAQ,IAAI,OAAO,CAE7B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAKjC;IAED;;;;;OAKG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAK5B;IAED;;;;;OAKG;IACH,IACW,YAAY,IAAI,YAAY,CAEtC;IAED,IAAW,YAAY,CAAC,KAAK,EAAE,YAAY,EAK1C;IAMD;;;OAGG;IACa,iBAAiB,IAAI,IAAI;IAezC;;;;OAIG;IACI,KAAK,IAAI,IAAI;IAKpB;;;;;OAKG;IACa,aAAa,IAAI,OAAO;IAMxC;;;OAGG;IACa,KAAK,IAAI,IAAI;IAS7B;;;OAGG;IACa,OAAO,IAAI,IAAI;IAS/B;;;OAGG;IACa,MAAM,IAAI,IAAI;IAS9B;;;OAGG;cACgB,eAAe,IAAI,IAAI;CAQ7C;AAED;;GAEG;AACH,yBAAiB,aAAa,CAAC;IAC3B,KAAY,KAAK,GAAG,mBAAmB,CAAC;CAC3C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,eAAe,EAAE,aAAa,CAAC;KAClC;CACJ"}

package/Controls/Components/Inputs/Choice/ChoiceElement.js

@@ -12,8 +12,11 @@ import { Appearanceable } from '../../../Behaviors/Appearanceable';
 import { Disableable } from '../../../Behaviors/Disableable';
 import { Invalidable } from '../../../Behaviors/Invalidable';
 import { Labelable } from '../../../Behaviors/Labelable';
+import { TextFormattable } from '../../../Behaviors/TextFormattable';
+import { Themeable } from '../../../Behaviors/Themeable';
 import { Valueable } from '../../../Behaviors/Valueable';
 import { Variantable } from '../../../Behaviors/Variantable';
+import { addInheritanceConsumerController } from '../../../Controllers/InheritanceConsumerController';
 import { Attribute } from '../../../Decorators/AttributeDecorator';
 import { Component } from '../../../Decorators/ComponentDecorator';
 import { IconPosition } from '../../../Types/IconPosition';
@@ -23,11 +26,10 @@ import { CheckmarkElement } from '../../Primitives/Checkmark/CheckmarkElement';
 import { FocusRingElement } from '../../Primitives/FocusRing/FocusRingElement';
 import { TextElement } from '../../Primitives/Text/TextElement';
 import { choiceElementTemplate } from './ChoiceElementTemplate';
+import { CHOICE_GROUP_INHERITANCE_CONTEXT } from './ChoiceGroupInheritanceContext';
+import { choiceElementCosmopolitanStyle } from './Themes/ChoiceElement.Cosmopolitan';
 import { choiceElementJoyStyle } from './Themes/ChoiceElement.Joy';
 import { choiceElementMemphisStyle } from './Themes/ChoiceElement.Memphis';
-import { choiceElementCosmopolitanStyle } from './Themes/ChoiceElement.Cosmopolitan';
-import { Themeable } from '../../../Behaviors/Themeable';
-import { TextFormattable } from '../../../Behaviors/TextFormattable';
 // #endregion
 /**
  * Choice - An option within a group of choices.
@@ -50,6 +52,9 @@ import { TextFormattable } from '../../../Behaviors/TextFormattable';
  */
 let ChoiceElement = class ChoiceElement extends Themeable(Invalidable(Disableable(Appearanceable(Variantable(Labelable(Valueable(TextFormattable(ToggableElement)))))))) {
     // #region Fields
+    _inheritance = addInheritanceConsumerController(this, {
+        context: CHOICE_GROUP_INHERITANCE_CONTEXT
+    });
     _inputElement;
     _name;
     _additional;
@@ -83,16 +88,65 @@ let ChoiceElement = class ChoiceElement extends Themeable(Invalidable(Disableabl
     static get is() {
         return 'mosaik-choice';
     }
+    /**
+     * @public
+     * @override
+     */
+    get disabled() {
+        return this._inheritance.get('disabled', super.disabled);
+    }
+    set disabled(value) {
+        this._inheritance.markExplicit('disabled');
+        super.disabled = value;
+    }
+    /**
+     * @public
+     * @override
+     */
+    get appearance() {
+        return this._inheritance.get('appearance', super.appearance);
+    }
+    set appearance(value) {
+        this._inheritance.markExplicit('appearance');
+        super.appearance = value;
+    }
+    /**
+     * @public
+     * @override
+     */
+    get variant() {
+        return this._inheritance.get('variant', super.variant);
+    }
+    set variant(value) {
+        this._inheritance.markExplicit('variant');
+        super.variant = value;
+    }
+    /**
+     * Gets or sets the `dir` property.
+     * When used inside a ChoiceGroup, inherits the group's dir unless explicitly set.
+     *
+     * @public
+     * @override
+     */
+    get dir() {
+        return this._inheritance.get('dir', super.dir);
+    }
+    set dir(value) {
+        this._inheritance.markExplicit('dir');
+        super.dir = value;
+    }
     /**
      * Gets or sets the `name` property.
+     * When used inside a ChoiceGroup, inherits the group's name unless explicitly set.
      *
      * @public
      * @attr
      */
     get name() {
-        return this._name;
+        return this._inheritance.get('name', this._name);
     }
     set name(value) {
+        this._inheritance.markExplicit('name');
         if (this._name !== value) {
             this._name = value;
             this.requestUpdate('name');