npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.685 → 3.0.687 - Mend

@cloudscape-design/components-themeable 3.0.685 → 3.0.687

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (158) hide show

package/lib/internal/template/internal/components/button-trigger/styles.scoped.css CHANGED Viewed

@@ -98,16 +98,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_button-trigger_18eso_2pvdv_101 > .awsui_arrow_18eso_2pvdv_101:not(#\9) {
+.awsui_button-trigger_18eso_svu85_101 > .awsui_arrow_18eso_svu85_101:not(#\9) {
   transition: transform var(--motion-duration-rotate-180-6z1h8e, 135ms) var(--motion-easing-rotate-180-l3wboa, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_button-trigger_18eso_2pvdv_101 > .awsui_arrow_18eso_2pvdv_101:not(#\9) {
+  .awsui_button-trigger_18eso_svu85_101 > .awsui_arrow_18eso_svu85_101:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_button-trigger_18eso_2pvdv_101 > .awsui_arrow_18eso_2pvdv_101:not(#\9), .awsui-mode-entering .awsui_button-trigger_18eso_2pvdv_101 > .awsui_arrow_18eso_2pvdv_101:not(#\9) {
+.awsui-motion-disabled .awsui_button-trigger_18eso_svu85_101 > .awsui_arrow_18eso_svu85_101:not(#\9), .awsui-mode-entering .awsui_button-trigger_18eso_svu85_101 > .awsui_arrow_18eso_svu85_101:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -116,7 +116,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_button-trigger_18eso_2pvdv_101:not(#\9) {
+.awsui_button-trigger_18eso_svu85_101:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -166,51 +166,51 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-default-aksbt5, #687078);
   min-block-size: var(--size-vertical-input-ubbp77, 32px);
 }
-.awsui_button-trigger_18eso_2pvdv_101.awsui_has-caret_18eso_2pvdv_168:not(#\9) {
+.awsui_button-trigger_18eso_svu85_101.awsui_has-caret_18eso_svu85_168:not(#\9) {
   padding-inline-end: var(--space-field-icon-offset-llp3ak, 32px);
 }
-.awsui_button-trigger_18eso_2pvdv_101 > .awsui_placeholder_18eso_2pvdv_171:not(#\9) {
+.awsui_button-trigger_18eso_svu85_101 > .awsui_placeholder_18eso_svu85_171:not(#\9) {
   color: var(--color-text-input-placeholder-epedqe, #687078);
   font-style: italic;
 }
-.awsui_button-trigger_18eso_2pvdv_101 > .awsui_arrow_18eso_2pvdv_101:not(#\9) {
+.awsui_button-trigger_18eso_svu85_101 > .awsui_arrow_18eso_svu85_101:not(#\9) {
   position: absolute;
   inset-inline-end: var(--space-field-horizontal-cy5q05, 8px);
   inset-block-start: calc(50% - var(--line-height-body-m-2zx78l, 22px) / 2);
   color: var(--color-text-button-inline-icon-default-870ilx, #545b64);
 }
-.awsui_button-trigger_18eso_2pvdv_101:not(#\9):hover > .awsui_arrow_18eso_2pvdv_101 {
+.awsui_button-trigger_18eso_svu85_101:not(#\9):hover > .awsui_arrow_18eso_svu85_101 {
   color: var(--color-text-button-inline-icon-hover-gmrtb4, #16191f);
 }
-.awsui_button-trigger_18eso_2pvdv_101.awsui_pressed_18eso_2pvdv_184 > .awsui_arrow_18eso_2pvdv_101:not(#\9) {
+.awsui_button-trigger_18eso_svu85_101.awsui_pressed_18eso_svu85_184 > .awsui_arrow_18eso_svu85_101:not(#\9) {
   transform: rotate(-180deg);
 }
-.awsui_button-trigger_18eso_2pvdv_101.awsui_disabled_18eso_2pvdv_187:not(#\9) {
+.awsui_button-trigger_18eso_svu85_101.awsui_disabled_18eso_svu85_187:not(#\9) {
   background-color: var(--color-background-input-disabled-zfoobi, #eaeded);
   border-block: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-disabled-v8bsvq, #eaeded);
   border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-disabled-v8bsvq, #eaeded);
   color: var(--color-text-input-disabled-c1yp62, #879596);
   cursor: auto;
 }
-.awsui_button-trigger_18eso_2pvdv_101.awsui_disabled_18eso_2pvdv_187 > .awsui_arrow_18eso_2pvdv_101:not(#\9) {
+.awsui_button-trigger_18eso_svu85_101.awsui_disabled_18eso_svu85_187 > .awsui_arrow_18eso_svu85_101:not(#\9) {
   color: var(--color-text-button-inline-icon-disabled-m6lq35, #aab7b8);
 }
-.awsui_button-trigger_18eso_2pvdv_101.awsui_disabled_18eso_2pvdv_187.awsui_in-filtering-token_18eso_2pvdv_197:not(#\9) {
+.awsui_button-trigger_18eso_svu85_101.awsui_disabled_18eso_svu85_187.awsui_in-filtering-token_18eso_svu85_197:not(#\9) {
   border-color: var(--color-border-control-disabled-4hz3mo, #d5dbdb);
 }
-.awsui_button-trigger_18eso_2pvdv_101.awsui_disabled_18eso_2pvdv_187 > .awsui_placeholder_18eso_2pvdv_171:not(#\9) {
+.awsui_button-trigger_18eso_svu85_101.awsui_disabled_18eso_svu85_187 > .awsui_placeholder_18eso_svu85_171:not(#\9) {
   color: var(--color-text-input-placeholder-disabled-ovndcz, #687078);
 }
-.awsui_button-trigger_18eso_2pvdv_101.awsui_read-only_18eso_2pvdv_203:not(#\9) {
+.awsui_button-trigger_18eso_svu85_101.awsui_readonly_18eso_svu85_203:not(#\9):not(.awsui_button-trigger_18eso_svu85_101.awsui_disabled_18eso_svu85_187) {
   background-color: var(--color-background-input-default-w7mbz6, #ffffff);
   border-block: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-disabled-v8bsvq, #eaeded);
   border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-disabled-v8bsvq, #eaeded);
 }
-.awsui_button-trigger_18eso_2pvdv_101:not(#\9):focus {
+.awsui_button-trigger_18eso_svu85_101:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_2pvdv_101:not(#\9):not(.awsui_in-filtering-token_18eso_2pvdv_197):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_svu85_101:not(#\9):not(.awsui_in-filtering-token_18eso_svu85_197):focus {
   outline: 2px dotted transparent;
   border-block: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-focused-v6z9fd, #0073bb);
   border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-focused-v6z9fd, #0073bb);
@@ -220,10 +220,10 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_2pvdv_101:not(#\
   border-end-end-radius: var(--border-radius-input-hy50dp, 2px);
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-0k725q, 1px) var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_button-trigger_18eso_2pvdv_101:not(#\9):not(.awsui_in-filtering-token_18eso_2pvdv_197):invalid {
+.awsui_button-trigger_18eso_svu85_101:not(#\9):not(.awsui_in-filtering-token_18eso_svu85_197):invalid {
   box-shadow: none;
 }
-.awsui_button-trigger_18eso_2pvdv_101:not(#\9):not(.awsui_in-filtering-token_18eso_2pvdv_197).awsui_invalid_18eso_2pvdv_225, .awsui_button-trigger_18eso_2pvdv_101:not(#\9):not(.awsui_in-filtering-token_18eso_2pvdv_197).awsui_invalid_18eso_2pvdv_225:focus {
+.awsui_button-trigger_18eso_svu85_101:not(#\9):not(.awsui_in-filtering-token_18eso_svu85_197).awsui_invalid_18eso_svu85_225, .awsui_button-trigger_18eso_svu85_101:not(#\9):not(.awsui_in-filtering-token_18eso_svu85_197).awsui_invalid_18eso_svu85_225:focus {
   color: var(--color-text-status-error-ofc4yr, #d13212);
   border-color: var(--color-text-status-error-ofc4yr, #d13212);
   padding-inline-start: calc(
@@ -231,10 +231,10 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_2pvdv_101:not(#\
 );
   border-inline-start-width: var(--border-invalid-width-hp6noi, 4px);
 }
-.awsui_button-trigger_18eso_2pvdv_101:not(#\9):not(.awsui_in-filtering-token_18eso_2pvdv_197).awsui_invalid_18eso_2pvdv_225:focus, .awsui_button-trigger_18eso_2pvdv_101:not(#\9):not(.awsui_in-filtering-token_18eso_2pvdv_197).awsui_invalid_18eso_2pvdv_225:focus:focus {
+.awsui_button-trigger_18eso_svu85_101:not(#\9):not(.awsui_in-filtering-token_18eso_svu85_197).awsui_invalid_18eso_svu85_225:focus, .awsui_button-trigger_18eso_svu85_101:not(#\9):not(.awsui_in-filtering-token_18eso_svu85_197).awsui_invalid_18eso_svu85_225:focus:focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-v3635w, 1px) var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_button-trigger_18eso_2pvdv_101:not(#\9):not(.awsui_in-filtering-token_18eso_2pvdv_197).awsui_warning_18eso_2pvdv_236, .awsui_button-trigger_18eso_2pvdv_101:not(#\9):not(.awsui_in-filtering-token_18eso_2pvdv_197).awsui_warning_18eso_2pvdv_236:focus {
+.awsui_button-trigger_18eso_svu85_101:not(#\9):not(.awsui_in-filtering-token_18eso_svu85_197).awsui_warning_18eso_svu85_236, .awsui_button-trigger_18eso_svu85_101:not(#\9):not(.awsui_in-filtering-token_18eso_svu85_197).awsui_warning_18eso_svu85_236:focus {
   color: var(--color-text-status-warning-azn00c, #906806);
   border-color: var(--color-text-status-warning-azn00c, #906806);
   padding-inline-start: calc(
@@ -242,23 +242,23 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_2pvdv_101:not(#\
 );
   border-inline-start-width: var(--border-invalid-width-hp6noi, 4px);
 }
-.awsui_button-trigger_18eso_2pvdv_101:not(#\9):not(.awsui_in-filtering-token_18eso_2pvdv_197).awsui_warning_18eso_2pvdv_236:focus, .awsui_button-trigger_18eso_2pvdv_101:not(#\9):not(.awsui_in-filtering-token_18eso_2pvdv_197).awsui_warning_18eso_2pvdv_236:focus:focus {
+.awsui_button-trigger_18eso_svu85_101:not(#\9):not(.awsui_in-filtering-token_18eso_svu85_197).awsui_warning_18eso_svu85_236:focus, .awsui_button-trigger_18eso_svu85_101:not(#\9):not(.awsui_in-filtering-token_18eso_svu85_197).awsui_warning_18eso_svu85_236:focus:focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-v3635w, 1px) var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_button-trigger_18eso_2pvdv_101.awsui_in-filtering-token_18eso_2pvdv_197:not(#\9) {
+.awsui_button-trigger_18eso_svu85_101.awsui_in-filtering-token_18eso_svu85_197:not(#\9) {
   border-color: var(--color-border-item-selected-20gejb, #0073bb);
   border-start-end-radius: 0;
   border-end-end-radius: 0;
   block-size: 100%;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_2pvdv_101.awsui_in-filtering-token_18eso_2pvdv_197:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_svu85_101.awsui_in-filtering-token_18eso_svu85_197:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_2pvdv_101.awsui_in-filtering-token_18eso_2pvdv_197:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_svu85_101.awsui_in-filtering-token_18eso_svu85_197:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-filtering-token-operation-select-focus-outline-gutter-lr5vk6, 0px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_2pvdv_101.awsui_in-filtering-token_18eso_2pvdv_197:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_svu85_101.awsui_in-filtering-token_18eso_svu85_197:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -272,6 +272,6 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_2pvdv_101.awsui_
   border-end-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_button-trigger_18eso_2pvdv_101.awsui_inline-tokens_18eso_2pvdv_274:not(#\9) {
+.awsui_button-trigger_18eso_svu85_101.awsui_inline-tokens_18eso_svu85_274:not(#\9) {
   padding-block: 0;
 }

package/lib/internal/template/internal/components/button-trigger/styles.selectors.js CHANGED Viewed

@@ -2,16 +2,16 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "button-trigger": "awsui_button-trigger_18eso_2pvdv_101",
-  "arrow": "awsui_arrow_18eso_2pvdv_101",
-  "has-caret": "awsui_has-caret_18eso_2pvdv_168",
-  "placeholder": "awsui_placeholder_18eso_2pvdv_171",
-  "pressed": "awsui_pressed_18eso_2pvdv_184",
-  "disabled": "awsui_disabled_18eso_2pvdv_187",
-  "in-filtering-token": "awsui_in-filtering-token_18eso_2pvdv_197",
-  "read-only": "awsui_read-only_18eso_2pvdv_203",
-  "invalid": "awsui_invalid_18eso_2pvdv_225",
-  "warning": "awsui_warning_18eso_2pvdv_236",
-  "inline-tokens": "awsui_inline-tokens_18eso_2pvdv_274"
+  "button-trigger": "awsui_button-trigger_18eso_svu85_101",
+  "arrow": "awsui_arrow_18eso_svu85_101",
+  "has-caret": "awsui_has-caret_18eso_svu85_168",
+  "placeholder": "awsui_placeholder_18eso_svu85_171",
+  "pressed": "awsui_pressed_18eso_svu85_184",
+  "disabled": "awsui_disabled_18eso_svu85_187",
+  "in-filtering-token": "awsui_in-filtering-token_18eso_svu85_197",
+  "readonly": "awsui_readonly_18eso_svu85_203",
+  "invalid": "awsui_invalid_18eso_svu85_225",
+  "warning": "awsui_warning_18eso_svu85_236",
+  "inline-tokens": "awsui_inline-tokens_18eso_svu85_274"
 };

package/lib/internal/template/internal/components/checkbox-icon/index.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ export interface CheckboxIconProps extends BaseComponentProps {
     checked?: boolean;
     indeterminate?: boolean;
     disabled?: boolean;
+    readOnly?: boolean;
 }
 export interface Dimension {
     viewBox: string;
@@ -14,6 +15,6 @@ export interface Dimension {
     size: number;
 }
 export declare const dimensionsByTheme: Record<NonNullable<'default' | 'refresh'>, Dimension>;
-declare const CheckboxIcon: ({ checked, indeterminate, disabled, ...restProps }: CheckboxIconProps) => JSX.Element;
+declare const CheckboxIcon: ({ checked, indeterminate, disabled, readOnly, ...restProps }: CheckboxIconProps) => JSX.Element;
 export default CheckboxIcon;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/internal/components/checkbox-icon/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AAIxE,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd;AAGD,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,GAAG,SAAS,CAAC,EAAE,SAAS,CAiBnF,CAAC;AAEF,QAAA,MAAM,YAAY,~~uDAAgE~~,iBAAiB,~~gBA2BlG~~,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AAIxE,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd;AAGD,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,GAAG,SAAS,CAAC,EAAE,SAAS,CAiBnF,CAAC;AAEF,QAAA,MAAM,YAAY,iEAMf,iBAAiB,gBA+BnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/internal/template/internal/components/checkbox-icon/index.js CHANGED Viewed

@@ -26,7 +26,7 @@ export const dimensionsByTheme = {
     },
 };
 const CheckboxIcon = (_a) => {
-    var { checked, indeterminate, disabled = false } = _a, restProps = __rest(_a, ["checked", "indeterminate", "disabled"]);
+    var { checked, indeterminate, disabled = false, readOnly = false } = _a, restProps = __rest(_a, ["checked", "indeterminate", "disabled", "readOnly"]);
     const baseProps = getBaseProps(restProps);
     const theme = useVisualRefresh() ? 'refresh' : 'default';
     const dimensions = dimensionsByTheme[theme];
@@ -35,8 +35,12 @@ const CheckboxIcon = (_a) => {
                 [styles['styled-box-checked']]: checked,
                 [styles['styled-box-indeterminate']]: indeterminate,
                 [styles['styled-box-disabled']]: disabled,
+                [styles['styled-box-readonly']]: readOnly,
             }), x: dimensions.xy, y: dimensions.xy, rx: dimensions.r, ry: dimensions.r, width: dimensions.size, height: dimensions.size }),
-        checked || indeterminate ? (React.createElement("polyline", { className: clsx(styles['styled-line'], { [styles['styled-line-disabled']]: disabled }), points: indeterminate ? dimensions.indeterminate : dimensions.checked })) : null));
+        checked || indeterminate ? (React.createElement("polyline", { className: clsx(styles['styled-line'], {
+                [styles['styled-line-disabled']]: disabled,
+                [styles['styled-line-readonly']]: readOnly,
+            }), points: indeterminate ? dimensions.indeterminate : dimensions.checked })) : null));
 };
 export default CheckboxIcon;
 //# sourceMappingURL=index.js.map

package/lib/internal/template/internal/components/checkbox-icon/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,MAAM,MAAM,iBAAiB,CAAC;~~AAgBrC~~,6CAA6C;AAC7C,MAAM,CAAC,MAAM,iBAAiB,GAA0D;IACtF,OAAO,EAAE;QACP,OAAO,EAAE,WAAW;QACpB,aAAa,EAAE,cAAc;QAC7B,OAAO,EAAE,iBAAiB;QAC1B,EAAE,EAAE,GAAG;QACP,CAAC,EAAE,GAAG;QACN,IAAI,EAAE,EAAE;KACT;IACD,OAAO,EAAE;QACP,OAAO,EAAE,WAAW;QACpB,aAAa,EAAE,cAAc;QAC7B,OAAO,EAAE,iBAAiB;QAC1B,EAAE,EAAE,CAAC;QACL,CAAC,EAAE,CAAC;QACJ,IAAI,EAAE,EAAE;KACT;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,~~EAA6E~~,EAAE,EAAE;~~QAAjF~~,~~EAAE~~,OAAO,~~EAAE~~,aAAa,~~EAAE~~,QAAQ,GAAG,KAAK,~~OAAmC~~,~~EAA9B~~,SAAS,~~cAAxD~~,~~wCAA0D~~,~~CAAF~~;~~IAC5E~~,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,KAAK,GAAG,gBAAgB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IACzD,MAAM,UAAU,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,CACL,2CAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,CAAC,OAAO,iBAAc,MAAM,EAAC,SAAS,EAAC,OAAO,IAAK,SAAS;QAC1G,8BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE;gBACpC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,OAAO;gBACvC,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,aAAa;gBACnD,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,QAAQ;aAC1C,CAAC,EACF,CAAC,EAAE,UAAU,CAAC,EAAE,EAChB,CAAC,EAAE,UAAU,CAAC,EAAE,EAChB,EAAE,EAAE,UAAU,CAAC,CAAC,EAChB,EAAE,EAAE,UAAU,CAAC,CAAC,EAChB,KAAK,EAAE,UAAU,CAAC,IAAI,EACtB,MAAM,EAAE,UAAU,CAAC,IAAI,GACvB;QACD,OAAO,IAAI,aAAa,CAAC,CAAC,CAAC,CAC1B,kCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,QAAQ,~~EAAE,~~CAAC,~~EACtF~~,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,GACrE,CACH,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\nexport interface CheckboxIconProps extends BaseComponentProps {\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n}\nexport interface Dimension {\n viewBox: string;\n indeterminate: string;\n checked: string;\n xy: number;\n r: number;\n size: number;\n}\n\n// Can't use css variables for svg attributes\nexport const dimensionsByTheme: Record<NonNullable<'default' \| 'refresh'>, Dimension> = {\n default: {\n viewBox: '0 0 14 14',\n indeterminate: '2.5,7 11.5,7',\n checked: '2.5,7 6,10 11,3',\n xy: 0.5,\n r: 1.5,\n size: 13,\n },\n refresh: {\n viewBox: '0 0 16 16',\n indeterminate: '3.5,8 12.5,8',\n checked: '3.5,8 7,11 12,4',\n xy: 1,\n r: 2,\n size: 14,\n },\n};\n\nconst CheckboxIcon = ({ checked, indeterminate, disabled = false, ...restProps }: CheckboxIconProps) => {\n const baseProps = getBaseProps(restProps);\n const theme = useVisualRefresh() ? 'refresh' : 'default';\n const dimensions = dimensionsByTheme[theme];\n return (\n <svg className={styles.root} viewBox={dimensions.viewBox} aria-hidden=\"true\" focusable=\"false\" {...baseProps}>\n <rect\n className={clsx(styles['styled-box'], {\n [styles['styled-box-checked']]: checked,\n [styles['styled-box-indeterminate']]: indeterminate,\n [styles['styled-box-disabled']]: disabled,\n })}\n x={dimensions.xy}\n y={dimensions.xy}\n rx={dimensions.r}\n ry={dimensions.r}\n width={dimensions.size}\n height={dimensions.size}\n />\n {checked \|\| indeterminate ? (\n <polyline\n className={clsx(styles['styled-line'], { [styles['styled-line-disabled']]: disabled })}\n points={indeterminate ? dimensions.indeterminate : dimensions.checked}\n />\n ) : null}\n </svg>\n );\n};\n\nexport default CheckboxIcon;\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAiBrC,6CAA6C;AAC7C,MAAM,CAAC,MAAM,iBAAiB,GAA0D;IACtF,OAAO,EAAE;QACP,OAAO,EAAE,WAAW;QACpB,aAAa,EAAE,cAAc;QAC7B,OAAO,EAAE,iBAAiB;QAC1B,EAAE,EAAE,GAAG;QACP,CAAC,EAAE,GAAG;QACN,IAAI,EAAE,EAAE;KACT;IACD,OAAO,EAAE;QACP,OAAO,EAAE,WAAW;QACpB,aAAa,EAAE,cAAc;QAC7B,OAAO,EAAE,iBAAiB;QAC1B,EAAE,EAAE,CAAC;QACL,CAAC,EAAE,CAAC;QACJ,IAAI,EAAE,EAAE;KACT;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EAMF,EAAE,EAAE;QANF,EACpB,OAAO,EACP,aAAa,EACb,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,OAEE,EADf,SAAS,cALQ,oDAMrB,CADa;IAEZ,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,KAAK,GAAG,gBAAgB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IACzD,MAAM,UAAU,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,CACL,2CAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,CAAC,OAAO,iBAAc,MAAM,EAAC,SAAS,EAAC,OAAO,IAAK,SAAS;QAC1G,8BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE;gBACpC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,OAAO;gBACvC,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,aAAa;gBACnD,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,QAAQ;gBACzC,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,QAAQ;aAC1C,CAAC,EACF,CAAC,EAAE,UAAU,CAAC,EAAE,EAChB,CAAC,EAAE,UAAU,CAAC,EAAE,EAChB,EAAE,EAAE,UAAU,CAAC,CAAC,EAChB,EAAE,EAAE,UAAU,CAAC,CAAC,EAChB,KAAK,EAAE,UAAU,CAAC,IAAI,EACtB,MAAM,EAAE,UAAU,CAAC,IAAI,GACvB;QACD,OAAO,IAAI,aAAa,CAAC,CAAC,CAAC,CAC1B,kCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE;gBACrC,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,QAAQ;gBAC1C,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,QAAQ;aAC3C,CAAC,EACF,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,GACrE,CACH,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\nexport interface CheckboxIconProps extends BaseComponentProps {\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n}\nexport interface Dimension {\n viewBox: string;\n indeterminate: string;\n checked: string;\n xy: number;\n r: number;\n size: number;\n}\n\n// Can't use css variables for svg attributes\nexport const dimensionsByTheme: Record<NonNullable<'default' \| 'refresh'>, Dimension> = {\n default: {\n viewBox: '0 0 14 14',\n indeterminate: '2.5,7 11.5,7',\n checked: '2.5,7 6,10 11,3',\n xy: 0.5,\n r: 1.5,\n size: 13,\n },\n refresh: {\n viewBox: '0 0 16 16',\n indeterminate: '3.5,8 12.5,8',\n checked: '3.5,8 7,11 12,4',\n xy: 1,\n r: 2,\n size: 14,\n },\n};\n\nconst CheckboxIcon = ({\n checked,\n indeterminate,\n disabled = false,\n readOnly = false,\n ...restProps\n}: CheckboxIconProps) => {\n const baseProps = getBaseProps(restProps);\n const theme = useVisualRefresh() ? 'refresh' : 'default';\n const dimensions = dimensionsByTheme[theme];\n return (\n <svg className={styles.root} viewBox={dimensions.viewBox} aria-hidden=\"true\" focusable=\"false\" {...baseProps}>\n <rect\n className={clsx(styles['styled-box'], {\n [styles['styled-box-checked']]: checked,\n [styles['styled-box-indeterminate']]: indeterminate,\n [styles['styled-box-disabled']]: disabled,\n [styles['styled-box-readonly']]: readOnly,\n })}\n x={dimensions.xy}\n y={dimensions.xy}\n rx={dimensions.r}\n ry={dimensions.r}\n width={dimensions.size}\n height={dimensions.size}\n />\n {checked \|\| indeterminate ? (\n <polyline\n className={clsx(styles['styled-line'], {\n [styles['styled-line-disabled']]: disabled,\n [styles['styled-line-readonly']]: readOnly,\n })}\n points={indeterminate ? dimensions.indeterminate : dimensions.checked}\n />\n ) : null}\n </svg>\n );\n};\n\nexport default CheckboxIcon;\n"]}

package/lib/internal/template/internal/components/checkbox-icon/styles.css.js CHANGED Viewed

@@ -1,12 +1,14 @@
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1fn7j_1f4q9_97",
-  "styled-box": "awsui_styled-box_1fn7j_1f4q9_104",
-  "styled-box-checked": "awsui_styled-box-checked_1fn7j_1f4q9_110",
-  "styled-box-indeterminate": "awsui_styled-box-indeterminate_1fn7j_1f4q9_110",
-  "styled-box-disabled": "awsui_styled-box-disabled_1fn7j_1f4q9_114",
-  "styled-line": "awsui_styled-line_1fn7j_1f4q9_128",
-  "styled-line-disabled": "awsui_styled-line-disabled_1fn7j_1f4q9_133"
+  "root": "awsui_root_1fn7j_gwq17_97",
+  "styled-box": "awsui_styled-box_1fn7j_gwq17_104",
+  "styled-box-checked": "awsui_styled-box-checked_1fn7j_gwq17_110",
+  "styled-box-indeterminate": "awsui_styled-box-indeterminate_1fn7j_gwq17_110",
+  "styled-box-disabled": "awsui_styled-box-disabled_1fn7j_gwq17_114",
+  "styled-box-readonly": "awsui_styled-box-readonly_1fn7j_gwq17_114",
+  "styled-line": "awsui_styled-line_1fn7j_gwq17_128",
+  "styled-line-disabled": "awsui_styled-line-disabled_1fn7j_gwq17_133",
+  "styled-line-readonly": "awsui_styled-line-readonly_1fn7j_gwq17_136"
 };

package/lib/internal/template/internal/components/checkbox-icon/styles.scoped.css CHANGED Viewed

@@ -94,42 +94,45 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_1fn7j_1f4q9_97:not(#\9) {
+.awsui_root_1fn7j_gwq17_97:not(#\9) {
   position: absolute;
   inline-size: 100%;
   block-size: 100%;
   inset-block-start: 0;
   inset-inline-start: 0;
 }
-.awsui_root_1fn7j_1f4q9_97 > .awsui_styled-box_1fn7j_1f4q9_104:not(#\9) {
+.awsui_root_1fn7j_gwq17_97 > .awsui_styled-box_1fn7j_gwq17_104:not(#\9) {
   fill: var(--color-background-control-default-n6yadr, #ffffff);
   stroke: var(--color-border-control-default-8uhjl0, #687078);
   stroke-width: var(--border-field-width-yoy972, 1px);
   transition: fill var(--motion-duration-transition-quick-j01tkg, 90ms) var(--motion-easing-transition-quick-9ktw66, linear), stroke var(--motion-duration-transition-quick-j01tkg, 90ms) var(--motion-easing-transition-quick-9ktw66, linear);
 }
-.awsui_root_1fn7j_1f4q9_97 > .awsui_styled-box-checked_1fn7j_1f4q9_110:not(#\9), .awsui_root_1fn7j_1f4q9_97 > .awsui_styled-box-indeterminate_1fn7j_1f4q9_110:not(#\9) {
+.awsui_root_1fn7j_gwq17_97 > .awsui_styled-box-checked_1fn7j_gwq17_110:not(#\9), .awsui_root_1fn7j_gwq17_97 > .awsui_styled-box-indeterminate_1fn7j_gwq17_110:not(#\9) {
   fill: var(--color-background-control-checked-pvanxo, #0073bb);
   stroke: var(--color-border-control-checked-bqdl6s, #0073bb);
 }
-.awsui_root_1fn7j_1f4q9_97 > .awsui_styled-box-disabled_1fn7j_1f4q9_114:not(#\9) {
+.awsui_root_1fn7j_gwq17_97 > .awsui_styled-box-disabled_1fn7j_gwq17_114:not(#\9), .awsui_root_1fn7j_gwq17_97 > .awsui_styled-box-readonly_1fn7j_gwq17_114:not(#\9) {
   fill: var(--color-background-control-disabled-dsn0t2, #d5dbdb);
   stroke: var(--color-border-control-disabled-4hz3mo, #d5dbdb);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_root_1fn7j_1f4q9_97 > .awsui_styled-box_1fn7j_1f4q9_104:not(#\9) {
+  .awsui_root_1fn7j_gwq17_97 > .awsui_styled-box_1fn7j_gwq17_104:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_root_1fn7j_1f4q9_97 > .awsui_styled-box_1fn7j_1f4q9_104:not(#\9), .awsui-mode-entering .awsui_root_1fn7j_1f4q9_97 > .awsui_styled-box_1fn7j_1f4q9_104:not(#\9) {
+.awsui-motion-disabled .awsui_root_1fn7j_gwq17_97 > .awsui_styled-box_1fn7j_gwq17_104:not(#\9), .awsui-mode-entering .awsui_root_1fn7j_gwq17_97 > .awsui_styled-box_1fn7j_gwq17_104:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_root_1fn7j_1f4q9_97 > .awsui_styled-line_1fn7j_1f4q9_128:not(#\9) {
+.awsui_root_1fn7j_gwq17_97 > .awsui_styled-line_1fn7j_gwq17_128:not(#\9) {
   stroke: var(--color-foreground-control-default-8qoldl, #ffffff);
   stroke-width: 2;
   fill: none;
 }
-.awsui_root_1fn7j_1f4q9_97 > .awsui_styled-line-disabled_1fn7j_1f4q9_133:not(#\9) {
+.awsui_root_1fn7j_gwq17_97 > .awsui_styled-line-disabled_1fn7j_gwq17_133:not(#\9) {
   stroke: var(--color-foreground-control-disabled-fcoqdk, #ffffff);
+}
+.awsui_root_1fn7j_gwq17_97 > .awsui_styled-line-readonly_1fn7j_gwq17_136:not(#\9) {
+  stroke: var(--color-foreground-control-read-only-egnjey, #687078);
 }

package/lib/internal/template/internal/components/checkbox-icon/styles.selectors.js CHANGED Viewed

@@ -2,12 +2,14 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1fn7j_1f4q9_97",
-  "styled-box": "awsui_styled-box_1fn7j_1f4q9_104",
-  "styled-box-checked": "awsui_styled-box-checked_1fn7j_1f4q9_110",
-  "styled-box-indeterminate": "awsui_styled-box-indeterminate_1fn7j_1f4q9_110",
-  "styled-box-disabled": "awsui_styled-box-disabled_1fn7j_1f4q9_114",
-  "styled-line": "awsui_styled-line_1fn7j_1f4q9_128",
-  "styled-line-disabled": "awsui_styled-line-disabled_1fn7j_1f4q9_133"
+  "root": "awsui_root_1fn7j_gwq17_97",
+  "styled-box": "awsui_styled-box_1fn7j_gwq17_104",
+  "styled-box-checked": "awsui_styled-box-checked_1fn7j_gwq17_110",
+  "styled-box-indeterminate": "awsui_styled-box-indeterminate_1fn7j_gwq17_110",
+  "styled-box-disabled": "awsui_styled-box-disabled_1fn7j_gwq17_114",
+  "styled-box-readonly": "awsui_styled-box-readonly_1fn7j_gwq17_114",
+  "styled-line": "awsui_styled-line_1fn7j_gwq17_128",
+  "styled-line-disabled": "awsui_styled-line-disabled_1fn7j_gwq17_133",
+  "styled-line-readonly": "awsui_styled-line-readonly_1fn7j_gwq17_136"
 };

package/lib/internal/template/internal/environment.js CHANGED Viewed

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (984fcb7e)";
+export var PACKAGE_VERSION = "3.0.0 (63e25093)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (984fcb7e)",
+  "PACKAGE_VERSION": "3.0.0 (63e25093)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

package/lib/internal/template/internal/generated/styles/tokens.d.ts CHANGED Viewed

@@ -350,6 +350,7 @@ export const colorBorderTilesDisabled: string;
 export const colorBorderTutorial: string;
 export const colorForegroundControlDefault: string;
 export const colorForegroundControlDisabled: string;
+export const colorForegroundControlReadOnly: string;
 export const colorShadowDefault: string;
 export const colorShadowMedium: string;
 export const colorShadowSide: string;

package/lib/internal/template/internal/generated/styles/tokens.js CHANGED Viewed

@@ -350,6 +350,7 @@ export var colorBorderTilesDisabled = "var(--color-border-tiles-disabled-q5e1so,
 export var colorBorderTutorial = "var(--color-border-tutorial-kk53ya, #d1d5db)";
 export var colorForegroundControlDefault = "var(--color-foreground-control-default-wq2gpa, #ffffff)";
 export var colorForegroundControlDisabled = "var(--color-foreground-control-disabled-zmz2k2, #ffffff)";
+export var colorForegroundControlReadOnly = "var(--color-foreground-control-read-only-ibiswj, #5f6b7a)";
 export var colorShadowDefault = "var(--color-shadow-default-8jp634, rgba(0, 7, 22, 0.12))";
 export var colorShadowMedium = "var(--color-shadow-medium-wuskz4, rgba(0, 7, 22, 0.12))";
 export var colorShadowSide = "var(--color-shadow-side-75ahs7, rgba(0, 7, 22, 0.12))";

package/lib/internal/template/internal/generated/theming/index.cjs CHANGED Viewed

@@ -1285,6 +1285,10 @@ module.exports.preset = {
         "light": "{colorWhite}",
         "dark": "{colorGrey800}"
       },
+      "colorForegroundControlReadOnly": {
+        "light": "{colorGrey550}",
+        "dark": "{colorGrey450}"
+      },
       "colorShadowDefault": {
         "light": "{colorGreyTransparentHeavy}",
         "dark": "{colorGreyTransparentHeavy}"
@@ -3431,6 +3435,10 @@ module.exports.preset = {
             "light": "{colorGrey800}",
             "dark": "{colorGrey800}"
           },
+          "colorForegroundControlReadOnly": {
+            "light": "{colorGrey450}",
+            "dark": "{colorGrey450}"
+          },
           "colorShadowDefault": {
             "light": "{colorGreyTransparentHeavy}",
             "dark": "{colorGreyTransparentHeavy}"
@@ -4497,6 +4505,10 @@ module.exports.preset = {
             "light": "{colorGrey800}",
             "dark": "{colorGrey800}"
           },
+          "colorForegroundControlReadOnly": {
+            "light": "{colorGrey450}",
+            "dark": "{colorGrey450}"
+          },
           "colorShadowDefault": {
             "light": "{colorGreyTransparentHeavy}",
             "dark": "{colorGreyTransparentHeavy}"
@@ -5495,6 +5507,10 @@ module.exports.preset = {
             "light": "{colorWhite}",
             "dark": "{colorGrey800}"
           },
+          "colorForegroundControlReadOnly": {
+            "light": "{colorGrey550}",
+            "dark": "{colorGrey450}"
+          },
           "colorShadowDefault": {
             "light": "{colorGreyTransparentHeavy}",
             "dark": "{colorGreyTransparentHeavy}"
@@ -6493,6 +6509,10 @@ module.exports.preset = {
             "light": "{colorWhite}",
             "dark": "{colorGrey800}"
           },
+          "colorForegroundControlReadOnly": {
+            "light": "{colorGrey550}",
+            "dark": "{colorGrey450}"
+          },
           "colorShadowDefault": {
             "light": "{colorGreyTransparentHeavy}",
             "dark": "{colorGreyTransparentHeavy}"
@@ -7491,6 +7511,10 @@ module.exports.preset = {
             "light": "{colorWhite}",
             "dark": "{colorGrey800}"
           },
+          "colorForegroundControlReadOnly": {
+            "light": "{colorGrey550}",
+            "dark": "{colorGrey450}"
+          },
           "colorShadowDefault": {
             "light": "{colorGreyTransparentHeavy}",
             "dark": "{colorGreyTransparentHeavy}"
@@ -8491,6 +8515,10 @@ module.exports.preset = {
             "light": "{colorGrey800}",
             "dark": "{colorGrey800}"
           },
+          "colorForegroundControlReadOnly": {
+            "light": "{colorGrey450}",
+            "dark": "{colorGrey450}"
+          },
           "colorShadowDefault": {
             "light": "{colorGreyTransparentHeavy}",
             "dark": "{colorGreyTransparentHeavy}"
@@ -9209,6 +9237,7 @@ module.exports.preset = {
       "colorBorderTutorial": "color",
       "colorForegroundControlDefault": "color",
       "colorForegroundControlDisabled": "color",
+      "colorForegroundControlReadOnly": "color",
       "colorShadowDefault": "color",
       "colorShadowMedium": "color",
       "colorShadowSide": "color",
@@ -9610,6 +9639,7 @@ module.exports.preset = {
     "colorBorderStatusWarning",
     "colorForegroundControlDefault",
     "colorForegroundControlDisabled",
+    "colorForegroundControlReadOnly",
     "colorTextAccent",
     "colorTextBodyDefault",
     "colorTextBodySecondary",
@@ -9928,6 +9958,7 @@ module.exports.preset = {
     "colorBorderStatusWarning",
     "colorForegroundControlDefault",
     "colorForegroundControlDisabled",
+    "colorForegroundControlReadOnly",
     "colorTextAccent",
     "colorTextBodyDefault",
     "colorTextBodySecondary",
@@ -10409,6 +10440,7 @@ module.exports.preset = {
     "colorBorderTutorial": "color-border-tutorial",
     "colorForegroundControlDefault": "color-foreground-control-default",
     "colorForegroundControlDisabled": "color-foreground-control-disabled",
+    "colorForegroundControlReadOnly": "color-foreground-control-read-only",
     "colorShadowDefault": "color-shadow-default",
     "colorShadowMedium": "color-shadow-medium",
     "colorShadowSide": "color-shadow-side",
@@ -11118,6 +11150,7 @@ module.exports.preset = {
     "colorBorderTutorial": "--color-border-tutorial-kk53ya",
     "colorForegroundControlDefault": "--color-foreground-control-default-wq2gpa",
     "colorForegroundControlDisabled": "--color-foreground-control-disabled-zmz2k2",
+    "colorForegroundControlReadOnly": "--color-foreground-control-read-only-ibiswj",
     "colorShadowDefault": "--color-shadow-default-8jp634",
     "colorShadowMedium": "--color-shadow-medium-wuskz4",
     "colorShadowSide": "--color-shadow-side-75ahs7",

package/lib/internal/template/internal/generated/theming/index.cjs.d.ts CHANGED Viewed

@@ -130,6 +130,7 @@ export declare interface TypedOverride {
     colorBorderStatusWarning?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
     colorForegroundControlDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
     colorForegroundControlDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
+    colorForegroundControlReadOnly?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
     colorTextAccent?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
     colorTextBodyDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
     colorTextBodySecondary?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -353,6 +354,7 @@ export declare interface TypedOverride {
         colorBorderStatusWarning?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
+        colorForegroundControlReadOnly?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextAccent?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodyDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodySecondary?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -576,6 +578,7 @@ export declare interface TypedOverride {
         colorBorderStatusWarning?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
+        colorForegroundControlReadOnly?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextAccent?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodyDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodySecondary?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -799,6 +802,7 @@ export declare interface TypedOverride {
         colorBorderStatusWarning?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
+        colorForegroundControlReadOnly?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextAccent?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodyDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodySecondary?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -1022,6 +1026,7 @@ export declare interface TypedOverride {
         colorBorderStatusWarning?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
+        colorForegroundControlReadOnly?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextAccent?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodyDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodySecondary?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -1245,6 +1250,7 @@ export declare interface TypedOverride {
         colorBorderStatusWarning?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
+        colorForegroundControlReadOnly?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextAccent?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodyDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodySecondary?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -1468,6 +1474,7 @@ export declare interface TypedOverride {
         colorBorderStatusWarning?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
+        colorForegroundControlReadOnly?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextAccent?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodyDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodySecondary?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -1691,6 +1698,7 @@ export declare interface TypedOverride {
         colorBorderStatusWarning?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorForegroundControlDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
+        colorForegroundControlReadOnly?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextAccent?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodyDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorTextBodySecondary?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;