@ni/nimble-components 33.5.0 → 33.7.0

package/dist/esm/icons/calendar-arrows-rotate-reverse-dot.d.ts

@@ -0,0 +1,13 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-icon-calendar-arrows-rotate-reverse-dot': IconCalendarArrowsRotateReverseDot;
+    }
+}
+/**
+ * The icon component for the 'calendarArrowsRotateReverseDot' icon
+ */
+export declare class IconCalendarArrowsRotateReverseDot extends Icon {
+    constructor();
+}
+export declare const iconCalendarArrowsRotateReverseDotTag = "nimble-icon-calendar-arrows-rotate-reverse-dot";

package/dist/esm/icons/calendar-arrows-rotate-reverse-dot.js

@@ -0,0 +1,15 @@
+// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+// See generation source in nimble-components/build/generate-icons
+import { calendarArrowsRotateReverseDot16X16 } from '@ni/nimble-tokens/dist/icons/js';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ * The icon component for the 'calendarArrowsRotateReverseDot' icon
+ */
+export class IconCalendarArrowsRotateReverseDot extends Icon {
+    constructor() {
+        super(calendarArrowsRotateReverseDot16X16);
+    }
+}
+registerIcon('icon-calendar-arrows-rotate-reverse-dot', IconCalendarArrowsRotateReverseDot);
+export const iconCalendarArrowsRotateReverseDotTag = 'nimble-icon-calendar-arrows-rotate-reverse-dot';
+//# sourceMappingURL=calendar-arrows-rotate-reverse-dot.js.map

package/dist/esm/icons/calendar-arrows-rotate-reverse-dot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-arrows-rotate-reverse-dot.js","sourceRoot":"","sources":["../../../src/icons/calendar-arrows-rotate-reverse-dot.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,kEAAkE;AAElE,OAAO,EAAE,mCAAmC,EAAE,MAAM,iCAAiC,CAAC;AACtF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQlD;;GAEG;AACH,MAAM,OAAO,kCAAmC,SAAQ,IAAI;IACxD;QACI,KAAK,CAAC,mCAAmC,CAAC,CAAC;IAC/C,CAAC;CACJ;AAED,YAAY,CAAC,yCAAyC,EAAE,kCAAkC,CAAC,CAAC;AAC5F,MAAM,CAAC,MAAM,qCAAqC,GAAG,gDAAgD,CAAC","sourcesContent":["// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY\n// See generation source in nimble-components/build/generate-icons\n\nimport { calendarArrowsRotateReverseDot16X16 } from '@ni/nimble-tokens/dist/icons/js';\nimport { Icon, registerIcon } from '../icon-base';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-icon-calendar-arrows-rotate-reverse-dot': IconCalendarArrowsRotateReverseDot;\n    }\n}\n\n/**\n * The icon component for the 'calendarArrowsRotateReverseDot' icon\n */\nexport class IconCalendarArrowsRotateReverseDot extends Icon {\n    public constructor() {\n        super(calendarArrowsRotateReverseDot16X16);\n    }\n}\n\nregisterIcon('icon-calendar-arrows-rotate-reverse-dot', IconCalendarArrowsRotateReverseDot);\nexport const iconCalendarArrowsRotateReverseDotTag = 'nimble-icon-calendar-arrows-rotate-reverse-dot';\n"]}

package/dist/esm/icons/message.d.ts

@@ -0,0 +1,13 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-icon-message': IconMessage;
+    }
+}
+/**
+ * The icon component for the 'message' icon
+ */
+export declare class IconMessage extends Icon {
+    constructor();
+}
+export declare const iconMessageTag = "nimble-icon-message";

package/dist/esm/icons/message.js

@@ -0,0 +1,15 @@
+// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+// See generation source in nimble-components/build/generate-icons
+import { message16X16 } from '@ni/nimble-tokens/dist/icons/js';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ * The icon component for the 'message' icon
+ */
+export class IconMessage extends Icon {
+    constructor() {
+        super(message16X16);
+    }
+}
+registerIcon('icon-message', IconMessage);
+export const iconMessageTag = 'nimble-icon-message';
+//# sourceMappingURL=message.js.map

package/dist/esm/icons/message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.js","sourceRoot":"","sources":["../../../src/icons/message.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,kEAAkE;AAElE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQlD;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,IAAI;IACjC;QACI,KAAK,CAAC,YAAY,CAAC,CAAC;IACxB,CAAC;CACJ;AAED,YAAY,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AAC1C,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY\n// See generation source in nimble-components/build/generate-icons\n\nimport { message16X16 } from '@ni/nimble-tokens/dist/icons/js';\nimport { Icon, registerIcon } from '../icon-base';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-icon-message': IconMessage;\n    }\n}\n\n/**\n * The icon component for the 'message' icon\n */\nexport class IconMessage extends Icon {\n    public constructor() {\n        super(message16X16);\n    }\n}\n\nregisterIcon('icon-message', IconMessage);\nexport const iconMessageTag = 'nimble-icon-message';\n"]}

package/dist/esm/icons/messages-sparkle.d.ts

@@ -0,0 +1,13 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-icon-messages-sparkle': IconMessagesSparkle;
+    }
+}
+/**
+ * The icon component for the 'messagesSparkle' icon
+ */
+export declare class IconMessagesSparkle extends Icon {
+    constructor();
+}
+export declare const iconMessagesSparkleTag = "nimble-icon-messages-sparkle";

package/dist/esm/icons/messages-sparkle.js

@@ -0,0 +1,15 @@
+// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+// See generation source in nimble-components/build/generate-icons
+import { messagesSparkle16X16 } from '@ni/nimble-tokens/dist/icons/js';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ * The icon component for the 'messagesSparkle' icon
+ */
+export class IconMessagesSparkle extends Icon {
+    constructor() {
+        super(messagesSparkle16X16);
+    }
+}
+registerIcon('icon-messages-sparkle', IconMessagesSparkle);
+export const iconMessagesSparkleTag = 'nimble-icon-messages-sparkle';
+//# sourceMappingURL=messages-sparkle.js.map

package/dist/esm/icons/messages-sparkle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages-sparkle.js","sourceRoot":"","sources":["../../../src/icons/messages-sparkle.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,kEAAkE;AAElE,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQlD;;GAEG;AACH,MAAM,OAAO,mBAAoB,SAAQ,IAAI;IACzC;QACI,KAAK,CAAC,oBAAoB,CAAC,CAAC;IAChC,CAAC;CACJ;AAED,YAAY,CAAC,uBAAuB,EAAE,mBAAmB,CAAC,CAAC;AAC3D,MAAM,CAAC,MAAM,sBAAsB,GAAG,8BAA8B,CAAC","sourcesContent":["// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY\n// See generation source in nimble-components/build/generate-icons\n\nimport { messagesSparkle16X16 } from '@ni/nimble-tokens/dist/icons/js';\nimport { Icon, registerIcon } from '../icon-base';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-icon-messages-sparkle': IconMessagesSparkle;\n    }\n}\n\n/**\n * The icon component for the 'messagesSparkle' icon\n */\nexport class IconMessagesSparkle extends Icon {\n    public constructor() {\n        super(messagesSparkle16X16);\n    }\n}\n\nregisterIcon('icon-messages-sparkle', IconMessagesSparkle);\nexport const iconMessagesSparkleTag = 'nimble-icon-messages-sparkle';\n"]}

package/dist/esm/icons/square-list-cog.d.ts

@@ -0,0 +1,13 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-icon-square-list-cog': IconSquareListCog;
+    }
+}
+/**
+ * The icon component for the 'squareListCog' icon
+ */
+export declare class IconSquareListCog extends Icon {
+    constructor();
+}
+export declare const iconSquareListCogTag = "nimble-icon-square-list-cog";

package/dist/esm/icons/square-list-cog.js

@@ -0,0 +1,15 @@
+// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+// See generation source in nimble-components/build/generate-icons
+import { squareListCog16X16 } from '@ni/nimble-tokens/dist/icons/js';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ * The icon component for the 'squareListCog' icon
+ */
+export class IconSquareListCog extends Icon {
+    constructor() {
+        super(squareListCog16X16);
+    }
+}
+registerIcon('icon-square-list-cog', IconSquareListCog);
+export const iconSquareListCogTag = 'nimble-icon-square-list-cog';
+//# sourceMappingURL=square-list-cog.js.map

package/dist/esm/icons/square-list-cog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"square-list-cog.js","sourceRoot":"","sources":["../../../src/icons/square-list-cog.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,kEAAkE;AAElE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQlD;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,IAAI;IACvC;QACI,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAC9B,CAAC;CACJ;AAED,YAAY,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,CAAC;AACxD,MAAM,CAAC,MAAM,oBAAoB,GAAG,6BAA6B,CAAC","sourcesContent":["// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY\n// See generation source in nimble-components/build/generate-icons\n\nimport { squareListCog16X16 } from '@ni/nimble-tokens/dist/icons/js';\nimport { Icon, registerIcon } from '../icon-base';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-icon-square-list-cog': IconSquareListCog;\n    }\n}\n\n/**\n * The icon component for the 'squareListCog' icon\n */\nexport class IconSquareListCog extends Icon {\n    public constructor() {\n        super(squareListCog16X16);\n    }\n}\n\nregisterIcon('icon-square-list-cog', IconSquareListCog);\nexport const iconSquareListCogTag = 'nimble-icon-square-list-cog';\n"]}

package/dist/esm/icons/window-dock.d.ts

@@ -0,0 +1,13 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-icon-window-dock': IconWindowDock;
+    }
+}
+/**
+ * The icon component for the 'windowDock' icon
+ */
+export declare class IconWindowDock extends Icon {
+    constructor();
+}
+export declare const iconWindowDockTag = "nimble-icon-window-dock";

package/dist/esm/icons/window-dock.js

@@ -0,0 +1,15 @@
+// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+// See generation source in nimble-components/build/generate-icons
+import { windowDock16X16 } from '@ni/nimble-tokens/dist/icons/js';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ * The icon component for the 'windowDock' icon
+ */
+export class IconWindowDock extends Icon {
+    constructor() {
+        super(windowDock16X16);
+    }
+}
+registerIcon('icon-window-dock', IconWindowDock);
+export const iconWindowDockTag = 'nimble-icon-window-dock';
+//# sourceMappingURL=window-dock.js.map

package/dist/esm/icons/window-dock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"window-dock.js","sourceRoot":"","sources":["../../../src/icons/window-dock.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,kEAAkE;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQlD;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,IAAI;IACpC;QACI,KAAK,CAAC,eAAe,CAAC,CAAC;IAC3B,CAAC;CACJ;AAED,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AACjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,yBAAyB,CAAC","sourcesContent":["// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY\n// See generation source in nimble-components/build/generate-icons\n\nimport { windowDock16X16 } from '@ni/nimble-tokens/dist/icons/js';\nimport { Icon, registerIcon } from '../icon-base';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-icon-window-dock': IconWindowDock;\n    }\n}\n\n/**\n * The icon component for the 'windowDock' icon\n */\nexport class IconWindowDock extends Icon {\n    public constructor() {\n        super(windowDock16X16);\n    }\n}\n\nregisterIcon('icon-window-dock', IconWindowDock);\nexport const iconWindowDockTag = 'nimble-icon-window-dock';\n"]}

package/dist/esm/icons/window-restore.d.ts

@@ -0,0 +1,13 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-icon-window-restore': IconWindowRestore;
+    }
+}
+/**
+ * The icon component for the 'windowRestore' icon
+ */
+export declare class IconWindowRestore extends Icon {
+    constructor();
+}
+export declare const iconWindowRestoreTag = "nimble-icon-window-restore";

package/dist/esm/icons/window-restore.js

@@ -0,0 +1,15 @@
+// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+// See generation source in nimble-components/build/generate-icons
+import { windowRestore16X16 } from '@ni/nimble-tokens/dist/icons/js';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ * The icon component for the 'windowRestore' icon
+ */
+export class IconWindowRestore extends Icon {
+    constructor() {
+        super(windowRestore16X16);
+    }
+}
+registerIcon('icon-window-restore', IconWindowRestore);
+export const iconWindowRestoreTag = 'nimble-icon-window-restore';
+//# sourceMappingURL=window-restore.js.map

package/dist/esm/icons/window-restore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"window-restore.js","sourceRoot":"","sources":["../../../src/icons/window-restore.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,kEAAkE;AAElE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQlD;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,IAAI;IACvC;QACI,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAC9B,CAAC;CACJ;AAED,YAAY,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,oBAAoB,GAAG,4BAA4B,CAAC","sourcesContent":["// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY\n// See generation source in nimble-components/build/generate-icons\n\nimport { windowRestore16X16 } from '@ni/nimble-tokens/dist/icons/js';\nimport { Icon, registerIcon } from '../icon-base';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-icon-window-restore': IconWindowRestore;\n    }\n}\n\n/**\n * The icon component for the 'windowRestore' icon\n */\nexport class IconWindowRestore extends Icon {\n    public constructor() {\n        super(windowRestore16X16);\n    }\n}\n\nregisterIcon('icon-window-restore', IconWindowRestore);\nexport const iconWindowRestoreTag = 'nimble-icon-window-restore';\n"]}

package/dist/esm/patterns/dropdown/styles.js

@@ -95,6 +95,10 @@ export const styles = css `
         color: ${controlLabelDisabledFontColor};
     }
 
+    :host([disabled][appearance-readonly]) .label {
+        color: ${controlLabelFontColor};
+    }
+
     .control {
         align-items: center;
         cursor: pointer;
@@ -116,6 +120,11 @@ export const styles = css `
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
+    :host([disabled][appearance-readonly]) .control {
+        color: ${bodyFontColor};
+        border-color: rgba(${borderRgbPartialColor}, 0.3);
+    }
+
     :host([error-visible]) .control,
     :host([error-visible][open]) .control,
     :host([error-visible][disabled]) .control {
@@ -137,8 +146,11 @@ export const styles = css `
         padding-left: ${mediumPadding};
     }
 
-    .selected-value[disabled]::placeholder {
-        color: ${bodyDisabledFontColor};
+    :host([disabled][appearance-readonly]) .selected-value {
+        cursor: text;
+        user-select: text;
+        -webkit-user-select: text;
+        padding-right: ${smallPadding};
     }
 
     .indicator {
@@ -150,6 +162,10 @@ export const styles = css `
         align-items: center;
     }
 
+    :host([disabled][appearance-readonly]) .indicator {
+        display: none;
+    }
+
     .indicator slot[name='indicator'] svg {
         width: ${iconSize};
         height: ${iconSize};
@@ -251,10 +267,6 @@ export const styles = css `
                 border-bottom-width: ${borderWidth};
                 padding-bottom: 0;
             }
-
-            :host([disabled]) .control {
-                border-color: rgba(${borderRgbPartialColor}, 0.1);
-            }
         `), appearanceBehavior(DropdownAppearance.outline, css `
             .control {
                 border-width: ${borderWidth};

package/dist/esm/patterns/dropdown/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,6BAA6B,EAChC,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,kBAAkB;AAClB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;iBAGX,aAAa;gBACd,QAAQ;;;;UAId,cAAc;qBACH,YAAY;;;mDAGkB,WAAW;;;;;;;;uBAQvC,WAAW;;;;yBAIT,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;+BAKO,SAAS;;;;;;4BAMZ,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;;;;;;YAU1B,YAAY;;;;;+BAKO,SAAS;;;;;;;;;iBASvB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;kBAQ5B,aAAa;iCACE,qBAAqB;;mBAEnC,WAAW;;;;+BAIC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;+BAMnB,SAAS;;;;;;;;;;;;;;;wBAehB,aAAa;;;;iBAIpB,qBAAqB;;;;;uBAKf,YAAY;;;;;;;;iBAQlB,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;0BAQX,YAAY;;;;uBAIf,YAAY;;;;;;;;mDAQgB,YAAY;wCACvB,YAAY;;;;;;sBAM9B,WAAW;;kBAEf,aAAa;;;;;;;;;sBAST,mBAAmB;kBACvB,WAAW,UAAU,gBAAgB;4BAC3B,0BAA0B;;;;8CAIR,aAAa;;;;yDAIF,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiCrD,oBAAoB;kBACnB,aAAa;;;;;mBAKZ,YAAY,IAAI,aAAa;;CAE/C,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,SAAS,EAC5B,GAAG,CAAA;;uCAE4B,WAAW;;;;;qCAKb,qBAAqB;;SAEjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;uCAIvB,WAAW;;;;;yCAKT,qBAAqB;;SAErD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    iconSize,\n    menuMinWidth,\n    popupBorderColor,\n    smallDelay,\n    smallPadding,\n    borderRgbPartialColor,\n    mediumPadding,\n    failColor,\n    elevation2BoxShadow,\n    placeholderFontColor,\n    controlLabelFontColor,\n    controlLabelFont,\n    controlLabelDisabledFontColor\n} from '../../theme-provider/design-tokens';\nimport { Theme } from '../../theme-provider/types';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { hexToRgbaCssColor } from '../../utilities/style/colors';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { DropdownAppearance } from './types';\nimport { userSelectNone } from '../../utilities/style/user-select';\n\n// prettier-ignore\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        color: ${bodyFontColor};\n        font: ${bodyFont};\n        position: relative;\n        flex-direction: column;\n        justify-content: flex-start;\n        ${userSelectNone}\n        min-width: ${menuMinWidth};\n        outline: none;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-focus-indicator-width: 1px;\n        --ni-private-indicator-lines-gap: 1px;\n    }\n\n    :host::before {\n        content: '';\n        position: absolute;\n        bottom: calc(${borderWidth} + var(--ni-private-indicator-lines-gap));\n        width: 0px;\n        height: 0px;\n        align-self: center;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-focus-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::before {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::before {\n        width: calc(100% - 8px);\n    }\n\n    :host([error-visible]):before {\n        border-bottom-color: ${failColor};\n    }\n\n    :host::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        align-self: center;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(:hover)::after,\n    :host(${focusVisible})::after {\n        width: 100%;\n    }\n\n    :host([error-visible]):after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([disabled]:hover)::after {\n        width: 0px;\n    }\n\n    .label {\n        display: flex;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .control {\n        align-items: center;\n        cursor: pointer;\n        display: flex;\n        width: 100%;\n        height: ${controlHeight};\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        background-color: transparent;\n        padding: ${borderWidth};\n    }\n\n    :host([open]:not(:hover)) .control {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([disabled]) .control {\n        cursor: default;\n        color: ${bodyDisabledFontColor};\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .control,\n    :host([error-visible][open]) .control,\n    :host([error-visible][disabled]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .selected-value {\n        flex: auto;\n        font-family: inherit;\n        text-align: start;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        padding: 0px;\n        padding-left: ${mediumPadding};\n    }\n\n    .selected-value[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .indicator {\n        flex: none;\n        margin-left: ${smallPadding};\n        padding-right: 8px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .indicator slot[name='indicator'] svg {\n        width: ${iconSize};\n        height: ${iconSize};\n        fill: ${bodyFontColor};\n    }\n\n    :host([disabled]) .indicator slot[name='indicator'] svg {\n        fill: ${bodyDisabledFontColor};\n    }\n\n    [part='end'] {\n        margin-inline-start: auto;\n    }\n\n    :host([open][position='above']) .anchored-region {\n        padding-bottom: ${smallPadding};\n    }\n\n    :host([open][position='below']) .anchored-region {\n        padding-top: ${smallPadding};\n    }\n\n    .listbox {\n        display: inline-flex;\n        flex-direction: column;\n        width: 100%;\n        --ni-private-listbox-visible-option-count: 10.5;\n        --ni-private-listbox-anchor-element-gap: ${smallPadding};\n        --ni-private-listbox-padding: ${smallPadding};\n        --ni-private-listbox-filter-height: 0px;\n        --ni-private-listbox-loading-indicator-height: 0px;\n        max-height: min(\n            calc(\n                var(--ni-private-listbox-anchor-element-gap) + \n                2 * ${borderWidth} + \n                var(--ni-private-listbox-padding) +\n                ${controlHeight} * var(--ni-private-listbox-visible-option-count) +\n                var(--ni-private-listbox-filter-height) +\n                var(--ni-private-listbox-loading-indicator-height)\n            ),\n            calc(\n                var(--ni-private-listbox-available-viewport-height) - \n                var(--ni-private-listbox-anchor-element-gap)\n            )\n        );\n        box-shadow: ${elevation2BoxShadow};\n        border: ${borderWidth} solid ${popupBorderColor};\n        background-color: ${applicationBackgroundColor};\n    }\n\n    .listbox:has(.filter-field) {\n        --ni-private-listbox-filter-height: ${controlHeight};\n    }\n\n    .listbox:has(.loading-container) {\n        --ni-private-listbox-loading-indicator-height: ${controlHeight};\n    }\n\n    :host([open][position='above']) .listbox {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    :host([open][position='below']) .listbox {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n    }\n\n    .scrollable-region {\n        overflow-y: auto;\n    }\n\n    .listbox slot {\n        display: block;\n        background: transparent;\n        padding: var(--ni-private-listbox-padding);\n    }\n\n    .listbox.empty slot {\n        display: none;\n    }\n\n    ::slotted([role='option']),\n    ::slotted(option) {\n        flex: none;\n    }\n\n    .no-results-label {\n        color: ${placeholderFontColor};\n        height: ${controlHeight};\n        display: inline-flex;\n        display: flex;\n        flex: 1 0 auto;\n        align-items: center;\n        padding: ${smallPadding} ${mediumPadding};\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.underline,\n        css`\n            .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.outline,\n        css`\n            .control {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .control:focus-within {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .listbox slot {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,6BAA6B,EAChC,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,kBAAkB;AAClB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;iBAGX,aAAa;gBACd,QAAQ;;;;UAId,cAAc;qBACH,YAAY;;;mDAGkB,WAAW;;;;;;;;uBAQvC,WAAW;;;;yBAIT,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;+BAKO,SAAS;;;;;;4BAMZ,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;;;;;;YAU1B,YAAY;;;;;+BAKO,SAAS;;;;;;;;;iBASvB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;kBAQpB,aAAa;iCACE,qBAAqB;;mBAEnC,WAAW;;;;+BAIC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;iBAIjC,aAAa;6BACD,qBAAqB;;;;;;+BAMnB,SAAS;;;;;;;;;;;;;;;wBAehB,aAAa;;;;;;;yBAOZ,YAAY;;;;;uBAKd,YAAY;;;;;;;;;;;;iBAYlB,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;0BAQX,YAAY;;;;uBAIf,YAAY;;;;;;;;mDAQgB,YAAY;wCACvB,YAAY;;;;;;sBAM9B,WAAW;;kBAEf,aAAa;;;;;;;;;sBAST,mBAAmB;kBACvB,WAAW,UAAU,gBAAgB;4BAC3B,0BAA0B;;;;8CAIR,aAAa;;;;yDAIF,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiCrD,oBAAoB;kBACnB,aAAa;;;;;mBAKZ,YAAY,IAAI,aAAa;;CAE/C,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,SAAS,EAC5B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;uCAIvB,WAAW;;;;;yCAKT,qBAAqB;;SAErD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    iconSize,\n    menuMinWidth,\n    popupBorderColor,\n    smallDelay,\n    smallPadding,\n    borderRgbPartialColor,\n    mediumPadding,\n    failColor,\n    elevation2BoxShadow,\n    placeholderFontColor,\n    controlLabelFontColor,\n    controlLabelFont,\n    controlLabelDisabledFontColor\n} from '../../theme-provider/design-tokens';\nimport { Theme } from '../../theme-provider/types';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { hexToRgbaCssColor } from '../../utilities/style/colors';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { DropdownAppearance } from './types';\nimport { userSelectNone } from '../../utilities/style/user-select';\n\n// prettier-ignore\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        color: ${bodyFontColor};\n        font: ${bodyFont};\n        position: relative;\n        flex-direction: column;\n        justify-content: flex-start;\n        ${userSelectNone}\n        min-width: ${menuMinWidth};\n        outline: none;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-focus-indicator-width: 1px;\n        --ni-private-indicator-lines-gap: 1px;\n    }\n\n    :host::before {\n        content: '';\n        position: absolute;\n        bottom: calc(${borderWidth} + var(--ni-private-indicator-lines-gap));\n        width: 0px;\n        height: 0px;\n        align-self: center;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-focus-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::before {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::before {\n        width: calc(100% - 8px);\n    }\n\n    :host([error-visible]):before {\n        border-bottom-color: ${failColor};\n    }\n\n    :host::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        align-self: center;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(:hover)::after,\n    :host(${focusVisible})::after {\n        width: 100%;\n    }\n\n    :host([error-visible]):after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([disabled]:hover)::after {\n        width: 0px;\n    }\n\n    .label {\n        display: flex;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    :host([disabled][appearance-readonly]) .label {\n        color: ${controlLabelFontColor};\n    }\n\n    .control {\n        align-items: center;\n        cursor: pointer;\n        display: flex;\n        width: 100%;\n        height: ${controlHeight};\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        background-color: transparent;\n        padding: ${borderWidth};\n    }\n\n    :host([open]:not(:hover)) .control {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([disabled]) .control {\n        cursor: default;\n        color: ${bodyDisabledFontColor};\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([disabled][appearance-readonly]) .control {\n        color: ${bodyFontColor};\n        border-color: rgba(${borderRgbPartialColor}, 0.3);\n    }\n\n    :host([error-visible]) .control,\n    :host([error-visible][open]) .control,\n    :host([error-visible][disabled]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .selected-value {\n        flex: auto;\n        font-family: inherit;\n        text-align: start;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        padding: 0px;\n        padding-left: ${mediumPadding};\n    }\n\n    :host([disabled][appearance-readonly]) .selected-value {\n        cursor: text;\n        user-select: text;\n        -webkit-user-select: text;\n        padding-right: ${smallPadding};\n    }\n\n    .indicator {\n        flex: none;\n        margin-left: ${smallPadding};\n        padding-right: 8px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n\n    :host([disabled][appearance-readonly]) .indicator {\n        display: none;\n    }\n\n    .indicator slot[name='indicator'] svg {\n        width: ${iconSize};\n        height: ${iconSize};\n        fill: ${bodyFontColor};\n    }\n\n    :host([disabled]) .indicator slot[name='indicator'] svg {\n        fill: ${bodyDisabledFontColor};\n    }\n\n    [part='end'] {\n        margin-inline-start: auto;\n    }\n\n    :host([open][position='above']) .anchored-region {\n        padding-bottom: ${smallPadding};\n    }\n\n    :host([open][position='below']) .anchored-region {\n        padding-top: ${smallPadding};\n    }\n\n    .listbox {\n        display: inline-flex;\n        flex-direction: column;\n        width: 100%;\n        --ni-private-listbox-visible-option-count: 10.5;\n        --ni-private-listbox-anchor-element-gap: ${smallPadding};\n        --ni-private-listbox-padding: ${smallPadding};\n        --ni-private-listbox-filter-height: 0px;\n        --ni-private-listbox-loading-indicator-height: 0px;\n        max-height: min(\n            calc(\n                var(--ni-private-listbox-anchor-element-gap) + \n                2 * ${borderWidth} + \n                var(--ni-private-listbox-padding) +\n                ${controlHeight} * var(--ni-private-listbox-visible-option-count) +\n                var(--ni-private-listbox-filter-height) +\n                var(--ni-private-listbox-loading-indicator-height)\n            ),\n            calc(\n                var(--ni-private-listbox-available-viewport-height) - \n                var(--ni-private-listbox-anchor-element-gap)\n            )\n        );\n        box-shadow: ${elevation2BoxShadow};\n        border: ${borderWidth} solid ${popupBorderColor};\n        background-color: ${applicationBackgroundColor};\n    }\n\n    .listbox:has(.filter-field) {\n        --ni-private-listbox-filter-height: ${controlHeight};\n    }\n\n    .listbox:has(.loading-container) {\n        --ni-private-listbox-loading-indicator-height: ${controlHeight};\n    }\n\n    :host([open][position='above']) .listbox {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    :host([open][position='below']) .listbox {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n    }\n\n    .scrollable-region {\n        overflow-y: auto;\n    }\n\n    .listbox slot {\n        display: block;\n        background: transparent;\n        padding: var(--ni-private-listbox-padding);\n    }\n\n    .listbox.empty slot {\n        display: none;\n    }\n\n    ::slotted([role='option']),\n    ::slotted(option) {\n        flex: none;\n    }\n\n    .no-results-label {\n        color: ${placeholderFontColor};\n        height: ${controlHeight};\n        display: inline-flex;\n        display: flex;\n        flex: 1 0 auto;\n        align-items: center;\n        padding: ${smallPadding} ${mediumPadding};\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.underline,\n        css`\n            .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.outline,\n        css`\n            .control {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .control:focus-within {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .listbox slot {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/select/index.d.ts

@@ -31,6 +31,7 @@ declare const Select_base: (abstract new (...args: any[]) => {
  */
 export declare class Select extends Select_base implements ListOptionOwner {
     appearance: DropdownAppearance;
+    appearanceReadOnly: boolean;
     /**
      * Reflects the placement for the listbox when the select is open.
      *

package/dist/esm/select/index.js

@@ -31,6 +31,7 @@ export class Select extends mixinErrorPattern(mixinRequiredVisiblePattern(FormAs
     constructor() {
         super(...arguments);
         this.appearance = DropdownAppearance.underline;
+        this.appearanceReadOnly = false;
         this.filterMode = FilterMode.none;
         this.clearable = false;
         this.loadingVisible = false;
@@ -1021,6 +1022,9 @@ export class Select extends mixinErrorPattern(mixinRequiredVisiblePattern(FormAs
 __decorate([
     attr
 ], Select.prototype, "appearance", void 0);
+__decorate([
+    attr({ attribute: 'appearance-readonly', mode: 'boolean' })
+], Select.prototype, "appearanceReadOnly", void 0);
 __decorate([
     attr({ attribute: 'position' })
 ], Select.prototype, "positionAttribute", void 0);