@ni/nimble-components 33.6.0 → 33.8.0

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

@@ -285,6 +285,15 @@ export const styles = css `
             :host([disabled]) .control {
                 background-color: rgba(${borderRgbPartialColor}, 0.07);
             }
+        `), appearanceBehavior(DropdownAppearance.frameless, css `
+            .control {
+                border-width: 0;
+                padding: ${borderWidth};
+            }
+
+            :host([full-bleed]) .selected-value {
+                padding-left: 0;
+            }
         `), themeBehavior(Theme.color, css `
             .listbox slot {
                 background: ${hexToRgbaCssColor(White, 0.15)};

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;;;;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"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/styles.ts"],"names":[],"mappings":"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","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    appearanceBehavior(\n        DropdownAppearance.frameless,\n        css`\n            .control {\n                border-width: 0;\n                padding: ${borderWidth};\n            }\n\n            :host([full-bleed]) .selected-value {\n                padding-left: 0;\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/patterns/dropdown/types.d.ts

@@ -16,6 +16,7 @@ export declare const DropdownAppearance: {
     readonly underline: "underline";
     readonly outline: "outline";
     readonly block: "block";
+    readonly frameless: "frameless";
 };
 export type DropdownAppearance = (typeof DropdownAppearance)[keyof typeof DropdownAppearance];
 /**

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

@@ -5,6 +5,7 @@ export const DropdownPosition = {
 export const DropdownAppearance = {
     underline: 'underline',
     outline: 'outline',
-    block: 'block'
+    block: 'block',
+    frameless: 'frameless'
 };
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/types.ts"],"names":[],"mappings":"AAWA,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACR,CAAC;AAIX,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACR,CAAC","sourcesContent":["import type { ListOption } from '../../list-option';\nimport type { ErrorPattern } from '../error/types';\n\n/**\n * The interface that dropdowns of various types implement. The properties in this interface\n * are leveraged by the shared dropdown pattern css.\n */\nexport interface DropdownPattern extends ErrorPattern {\n    position?: DropdownPosition;\n}\n\nexport const DropdownPosition = {\n    above: 'above',\n    below: 'below'\n} as const;\nexport type DropdownPosition =\n    (typeof DropdownPosition)[keyof typeof DropdownPosition];\n\nexport const DropdownAppearance = {\n    underline: 'underline',\n    outline: 'outline',\n    block: 'block'\n} as const;\nexport type DropdownAppearance =\n    (typeof DropdownAppearance)[keyof typeof DropdownAppearance];\n\n/**\n * @internal\n *\n * This interface is used to register options with their parent once their\n * 'connectedCallback' method is run. This allows for the \"owner\", like the\n * Select, to have its value set to that newly registered option earlier than it\n * might otherwise in certain situations. One such scenario is in an Angular\n * reactive form, where the form value is set to an option immediately after\n * dynamically adding it.\n */\nexport interface ListOptionOwner extends HTMLElement {\n    registerOption: (option: ListOption) => void;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/types.ts"],"names":[],"mappings":"AAWA,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACR,CAAC;AAIX,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,WAAW;CAChB,CAAC","sourcesContent":["import type { ListOption } from '../../list-option';\nimport type { ErrorPattern } from '../error/types';\n\n/**\n * The interface that dropdowns of various types implement. The properties in this interface\n * are leveraged by the shared dropdown pattern css.\n */\nexport interface DropdownPattern extends ErrorPattern {\n    position?: DropdownPosition;\n}\n\nexport const DropdownPosition = {\n    above: 'above',\n    below: 'below'\n} as const;\nexport type DropdownPosition =\n    (typeof DropdownPosition)[keyof typeof DropdownPosition];\n\nexport const DropdownAppearance = {\n    underline: 'underline',\n    outline: 'outline',\n    block: 'block',\n    frameless: 'frameless'\n} as const;\nexport type DropdownAppearance =\n    (typeof DropdownAppearance)[keyof typeof DropdownAppearance];\n\n/**\n * @internal\n *\n * This interface is used to register options with their parent once their\n * 'connectedCallback' method is run. This allows for the \"owner\", like the\n * Select, to have its value set to that newly registered option earlier than it\n * might otherwise in certain situations. One such scenario is in an Angular\n * reactive form, where the form value is set to an option immediately after\n * dynamically adding it.\n */\nexport interface ListOptionOwner extends HTMLElement {\n    registerOption: (option: ListOption) => void;\n}\n"]}

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

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

package/dist/esm/select/index.js

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