@ni/nimble-components 29.0.0 → 29.1.1

package/dist/esm/rich-text/editor/styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../../utilities/style/display';
 import { bodyDisabledFontColor, bodyFont, bodyFontColor, borderHoverColor, borderRgbPartialColor, borderWidth, controlLabelFontColor, controlLabelDisabledFontColor, failColor, iconSize, smallDelay, mediumPadding, standardPadding, linkFontColor, controlSlimHeight } from '../../theme-provider/design-tokens';
 import { styles as errorStyles } from '../../patterns/error/styles';
 import { toolbarTag } from '../../toolbar';

package/dist/esm/rich-text/editor/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/rich-text/editor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,qBAAqB,EACrB,6BAA6B,EAC7B,SAAS,EACT,QAAQ,EACR,UAAU,EACV,aAAa,EACb,eAAe,EACf,aAAa,EACb,iBAAiB,EACpB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;;;gBAGD,QAAQ;;iBAEP,aAAa;;;cAGhB,WAAW;;;UAGf;AACE,yFAAyF,CAAC,EAC9F;;;;UAIE;AACE,qHAAqH,CAAC,EAC1H;;;;;;;;;;kBAUU,WAAW,eAAe,qBAAqB;;;;;;;4BAOrC,WAAW;;;;;yBAKd,gBAAgB;;4BAEb,UAAU;;;;+BAIP,gBAAgB;;;;;;;;;;iBAU9B,qBAAqB;kBACpB,WAAW,eAAe,qBAAqB;;;;+BAIlC,SAAS;;;;iCAIP,WAAW;;;;;;;;+BAQb,SAAS;;;;;;;;;;kBAUtB,WAAW;;;;;;;;;;;;;;;;;;UAkBnB;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;MAMhC;AACE;;;;;GAKG,CAAC,EACR;;;;;;;;;;;;;;;;;MAiBE,CAAA,+DAAgE,EAAE;;;;;;;;;;;;;;;;;;MAkBlE;AACE;;;GAGG,CAAC,EACR;;iBAEa,qBAAqB;;;;;;;;;iBASrB,6BAA6B;;;MAGxC;AACE;;;GAGG,CAAC,EACR;;iBAEa,aAAa;;UAEpB;AACE;;;;;;;;GAQG,CAAC,EACR;;;;;iBAKS,qBAAqB;;;;;MAKhC,CAAA,2BAA4B,EAAE;;MAE9B,CAAA,uDAAwD,EAAE;;iBAE/C,aAAa;;;;iBAIb,qBAAqB;;;;;;;;;;;yBAWb,qBAAqB;;;;;;;;;MASxC,UAAU;;;;;;;;MAQV,UAAU;;;;MAIV,SAAS;MACT,eAAe;kBACH,iBAAiB;;;;;;6BAMN,eAAe;eAC7B,eAAe;;;;gBAId,SAAS;gBACT,eAAe;gBACf,eAAe;gBACf,aAAa;kBACX,iBAAiB;;;;;;;;;;eAUpB,aAAa;;;CAG3B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    bodyDisabledFontColor,\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlLabelFontColor,\n    controlLabelDisabledFontColor,\n    failColor,\n    iconSize,\n    smallDelay,\n    mediumPadding,\n    standardPadding,\n    linkFontColor,\n    controlSlimHeight\n} from '../../theme-provider/design-tokens';\nimport { styles as errorStyles } from '../../patterns/error/styles';\nimport { toolbarTag } from '../../toolbar';\nimport { toggleButtonTag } from '../../toggle-button';\nimport { buttonTag } from '../../button';\nimport { anchorButtonTag } from '../../anchor-button';\nimport { menuButtonTag } from '../../menu-button';\n\nexport const styles = css`\n    ${display('inline-flex')}\n    ${errorStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        color: ${bodyFontColor};\n        flex-direction: column;\n        --ni-private-rich-text-editor-hover-indicator-width: calc(\n            ${borderWidth} + 1px\n        );\n\n        ${\n            /** Initial height of rich text editor with one line space when the footer is visible. */ ''\n        }\n        height: 82px;\n        --ni-private-rich-text-editor-footer-section-height: 40px;\n        --ni-private-rich-text-editor-footer-section-border-top-width: 2px;\n        ${\n            /** Minimum width is added to accommodate all the possible buttons in the toolbar and to support the mobile width. */ ''\n        }\n        min-width: 360px;\n    }\n\n    .container {\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        height: 100%;\n        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);\n    }\n\n    .container::after {\n        display: block;\n        content: ' ';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        left: 50%;\n        transform: translate(-50%, 50%);\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-rich-text-editor-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    .container:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    @media (prefers-reduced-motion) {\n        .container::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([disabled]) .container {\n        color: ${bodyDisabledFontColor};\n        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .container {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .container::after {\n        width: calc(100% + 2 * ${borderWidth});\n    }\n\n    :host([disabled]:hover) .container::after {\n        width: 0px;\n    }\n\n    :host([error-visible]) .container::after {\n        border-bottom-color: ${failColor};\n    }\n\n    .editor-container {\n        display: contents;\n    }\n\n    .editor {\n        display: flex;\n        flex-direction: column;\n        border: ${borderWidth} solid transparent;\n        border-radius: 0px;\n        flex: 1;\n        overflow: hidden;\n    }\n\n    :host([footer-hidden]) .editor {\n        height: 100%;\n    }\n\n    .ProseMirror {\n        overflow: auto;\n        height: 100%;\n        border: 0px;\n        border-radius: 0px;\n        background-color: transparent;\n        font: inherit;\n        padding: 8px;\n        ${\n            /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''\n        }\n        padding-right: calc(${iconSize});\n        box-sizing: border-box;\n        position: relative;\n        color: inherit;\n    }\n\n    ${\n        /**\n         * Below are the styles from prosemirror-view as the Prose mirror expects the \"white-space\" to be set. The recommendation is to load the style from the below package.\n         * However, the other classes used in the below file like \".ProseMirror-selectednode\", \".ProseMirror-hideselection\" were not used anywhere in the \".Prosemirror\" content editable div in the DOM. So added only the necessary styles below.\n         *\n         * https://github.com/ProseMirror/prosemirror-view/blob/db2223a88b540a8f381fc2720198342e29a60566/style/prosemirror.css#L5C1-L12C2\n         */ ''\n    }\n    .ProseMirror {\n        word-wrap: break-word;\n        white-space: pre-wrap;\n        -webkit-font-variant-ligatures: none;\n        font-variant-ligatures: none;\n        font-feature-settings: 'liga' 0;\n    }\n\n    .ProseMirror pre {\n        white-space: pre-wrap;\n    }\n\n    .ProseMirror li {\n        position: relative;\n    }\n\n    ${/** End of Prose Mirror defined styles from prosemirror-view */ ''}\n\n    .ProseMirror-focused {\n        outline: none;\n    }\n\n    .ProseMirror > :first-child {\n        margin-block-start: 0;\n    }\n\n    .ProseMirror > :last-child {\n        margin-block-end: 0;\n    }\n\n    .ProseMirror li > p {\n        margin-block: 0;\n    }\n\n    ${\n        /**\n         * Styles provided by Tiptap are necessary to display the placeholder value when the editor is empty.\n         * Tiptap doc reference: https://tiptap.dev/api/extensions/placeholder#additional-setup\n         */ ''\n    }\n    .ProseMirror p.is-editor-empty:first-child::before {\n        color: ${controlLabelFontColor};\n        content: attr(data-placeholder);\n        float: left;\n        height: 0;\n        pointer-events: none;\n        word-break: break-word;\n    }\n\n    :host([disabled]) .ProseMirror p.is-editor-empty:first-child::before {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    ${\n        /**\n         * Custom anchor stylings can be removed once leveraging 'nimble-anchor' is supported.\n         * See: https://github.com/ni/nimble/issues/1516\n         */ ''\n    }\n    .ProseMirror a {\n        color: ${linkFontColor};\n        white-space: normal;\n        ${\n            /**\n             * Setting 'pointer-events: none;' to restrict the user from opening a link using the right-click context menu: If the user manually edits\n             * the link's text content, the 'href' attribute of the anchor tag will not be updated. If they attempt to open it using\n             * the right-click context menu with 'Open in new tab/window,' it will still navigate to the link specified\n             * in the 'href' attribute, which may create unnecessary confusion while trying to open the link.\n             *\n             * Using pointer-events: none to disable link interactions can be removed when hyperlink support is added.\n             * see: https://github.com/ni/nimble/issues/1527\n             */ ''\n        }\n        pointer-events: none;\n    }\n\n    :host([disabled]) .ProseMirror a {\n        color: ${bodyDisabledFontColor};\n        fill: currentcolor;\n        cursor: default;\n    }\n\n    ${/** End of anchor styles */ ''}\n\n    ${/* Shared styles for all mention views at edit time. */ ''}\n    .ProseMirror .nimble-mention-view-edit {\n        color: ${bodyFontColor};\n    }\n\n    :host([disabled]) .ProseMirror .nimble-mention-view-edit {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .footer-section {\n        display: flex;\n        justify-content: space-between;\n        flex-shrink: 0;\n        border: 0px;\n        border-top: var(\n                --ni-private-rich-text-editor-footer-section-border-top-width\n            )\n            solid rgba(${borderRgbPartialColor}, 0.1);\n        height: var(--ni-private-rich-text-editor-footer-section-height);\n        overflow: hidden;\n    }\n\n    :host([footer-hidden]) .footer-section {\n        display: none;\n    }\n\n    ${toolbarTag}::part(positioning-region) {\n        background: transparent;\n        padding-right: 8px;\n        box-sizing: border-box;\n        gap: 0px;\n        height: var(--ni-private-rich-text-editor-footer-section-height);\n    }\n\n    ${toolbarTag}::part(start) {\n        gap: 8px;\n    }\n\n    ${buttonTag},\n    ${toggleButtonTag} {\n        height: ${controlSlimHeight};\n    }\n\n    .footer-actions {\n        display: flex;\n        justify-content: flex-end;\n        margin-inline-end: ${standardPadding};\n        gap: ${standardPadding};\n        place-items: center;\n    }\n\n    ::slotted(${buttonTag}),\n    ::slotted(${toggleButtonTag}),\n    ::slotted(${anchorButtonTag}),\n    ::slotted(${menuButtonTag}) {\n        height: ${controlSlimHeight};\n    }\n\n    :host([error-visible]) .error-icon {\n        display: none;\n    }\n\n    :host([error-visible]) .error-icon.scrollbar-width-calculated {\n        display: inline-flex;\n        position: absolute;\n        top: ${mediumPadding};\n        right: var(--ni-private-rich-text-editor-scrollbar-width);\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/rich-text/editor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,qBAAqB,EACrB,6BAA6B,EAC7B,SAAS,EACT,QAAQ,EACR,UAAU,EACV,aAAa,EACb,eAAe,EACf,aAAa,EACb,iBAAiB,EACpB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;;;gBAGD,QAAQ;;iBAEP,aAAa;;;cAGhB,WAAW;;;UAGf;AACE,yFAAyF,CAAC,EAC9F;;;;UAIE;AACE,qHAAqH,CAAC,EAC1H;;;;;;;;;;kBAUU,WAAW,eAAe,qBAAqB;;;;;;;4BAOrC,WAAW;;;;;yBAKd,gBAAgB;;4BAEb,UAAU;;;;+BAIP,gBAAgB;;;;;;;;;;iBAU9B,qBAAqB;kBACpB,WAAW,eAAe,qBAAqB;;;;+BAIlC,SAAS;;;;iCAIP,WAAW;;;;;;;;+BAQb,SAAS;;;;;;;;;;kBAUtB,WAAW;;;;;;;;;;;;;;;;;;UAkBnB;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;MAMhC;AACE;;;;;GAKG,CAAC,EACR;;;;;;;;;;;;;;;;;MAiBE,CAAA,+DAAgE,EAAE;;;;;;;;;;;;;;;;;;MAkBlE;AACE;;;GAGG,CAAC,EACR;;iBAEa,qBAAqB;;;;;;;;;iBASrB,6BAA6B;;;MAGxC;AACE;;;GAGG,CAAC,EACR;;iBAEa,aAAa;;UAEpB;AACE;;;;;;;;GAQG,CAAC,EACR;;;;;iBAKS,qBAAqB;;;;;MAKhC,CAAA,2BAA4B,EAAE;;MAE9B,CAAA,uDAAwD,EAAE;;iBAE/C,aAAa;;;;iBAIb,qBAAqB;;;;;;;;;;;yBAWb,qBAAqB;;;;;;;;;MASxC,UAAU;;;;;;;;MAQV,UAAU;;;;MAIV,SAAS;MACT,eAAe;kBACH,iBAAiB;;;;;;6BAMN,eAAe;eAC7B,eAAe;;;;gBAId,SAAS;gBACT,eAAe;gBACf,eAAe;gBACf,aAAa;kBACX,iBAAiB;;;;;;;;;;eAUpB,aAAa;;;CAG3B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\nimport {\n    bodyDisabledFontColor,\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlLabelFontColor,\n    controlLabelDisabledFontColor,\n    failColor,\n    iconSize,\n    smallDelay,\n    mediumPadding,\n    standardPadding,\n    linkFontColor,\n    controlSlimHeight\n} from '../../theme-provider/design-tokens';\nimport { styles as errorStyles } from '../../patterns/error/styles';\nimport { toolbarTag } from '../../toolbar';\nimport { toggleButtonTag } from '../../toggle-button';\nimport { buttonTag } from '../../button';\nimport { anchorButtonTag } from '../../anchor-button';\nimport { menuButtonTag } from '../../menu-button';\n\nexport const styles = css`\n    ${display('inline-flex')}\n    ${errorStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        color: ${bodyFontColor};\n        flex-direction: column;\n        --ni-private-rich-text-editor-hover-indicator-width: calc(\n            ${borderWidth} + 1px\n        );\n\n        ${\n            /** Initial height of rich text editor with one line space when the footer is visible. */ ''\n        }\n        height: 82px;\n        --ni-private-rich-text-editor-footer-section-height: 40px;\n        --ni-private-rich-text-editor-footer-section-border-top-width: 2px;\n        ${\n            /** Minimum width is added to accommodate all the possible buttons in the toolbar and to support the mobile width. */ ''\n        }\n        min-width: 360px;\n    }\n\n    .container {\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        height: 100%;\n        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);\n    }\n\n    .container::after {\n        display: block;\n        content: ' ';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        left: 50%;\n        transform: translate(-50%, 50%);\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-rich-text-editor-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    .container:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    @media (prefers-reduced-motion) {\n        .container::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([disabled]) .container {\n        color: ${bodyDisabledFontColor};\n        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .container {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .container::after {\n        width: calc(100% + 2 * ${borderWidth});\n    }\n\n    :host([disabled]:hover) .container::after {\n        width: 0px;\n    }\n\n    :host([error-visible]) .container::after {\n        border-bottom-color: ${failColor};\n    }\n\n    .editor-container {\n        display: contents;\n    }\n\n    .editor {\n        display: flex;\n        flex-direction: column;\n        border: ${borderWidth} solid transparent;\n        border-radius: 0px;\n        flex: 1;\n        overflow: hidden;\n    }\n\n    :host([footer-hidden]) .editor {\n        height: 100%;\n    }\n\n    .ProseMirror {\n        overflow: auto;\n        height: 100%;\n        border: 0px;\n        border-radius: 0px;\n        background-color: transparent;\n        font: inherit;\n        padding: 8px;\n        ${\n            /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''\n        }\n        padding-right: calc(${iconSize});\n        box-sizing: border-box;\n        position: relative;\n        color: inherit;\n    }\n\n    ${\n        /**\n         * Below are the styles from prosemirror-view as the Prose mirror expects the \"white-space\" to be set. The recommendation is to load the style from the below package.\n         * However, the other classes used in the below file like \".ProseMirror-selectednode\", \".ProseMirror-hideselection\" were not used anywhere in the \".Prosemirror\" content editable div in the DOM. So added only the necessary styles below.\n         *\n         * https://github.com/ProseMirror/prosemirror-view/blob/db2223a88b540a8f381fc2720198342e29a60566/style/prosemirror.css#L5C1-L12C2\n         */ ''\n    }\n    .ProseMirror {\n        word-wrap: break-word;\n        white-space: pre-wrap;\n        -webkit-font-variant-ligatures: none;\n        font-variant-ligatures: none;\n        font-feature-settings: 'liga' 0;\n    }\n\n    .ProseMirror pre {\n        white-space: pre-wrap;\n    }\n\n    .ProseMirror li {\n        position: relative;\n    }\n\n    ${/** End of Prose Mirror defined styles from prosemirror-view */ ''}\n\n    .ProseMirror-focused {\n        outline: none;\n    }\n\n    .ProseMirror > :first-child {\n        margin-block-start: 0;\n    }\n\n    .ProseMirror > :last-child {\n        margin-block-end: 0;\n    }\n\n    .ProseMirror li > p {\n        margin-block: 0;\n    }\n\n    ${\n        /**\n         * Styles provided by Tiptap are necessary to display the placeholder value when the editor is empty.\n         * Tiptap doc reference: https://tiptap.dev/api/extensions/placeholder#additional-setup\n         */ ''\n    }\n    .ProseMirror p.is-editor-empty:first-child::before {\n        color: ${controlLabelFontColor};\n        content: attr(data-placeholder);\n        float: left;\n        height: 0;\n        pointer-events: none;\n        word-break: break-word;\n    }\n\n    :host([disabled]) .ProseMirror p.is-editor-empty:first-child::before {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    ${\n        /**\n         * Custom anchor stylings can be removed once leveraging 'nimble-anchor' is supported.\n         * See: https://github.com/ni/nimble/issues/1516\n         */ ''\n    }\n    .ProseMirror a {\n        color: ${linkFontColor};\n        white-space: normal;\n        ${\n            /**\n             * Setting 'pointer-events: none;' to restrict the user from opening a link using the right-click context menu: If the user manually edits\n             * the link's text content, the 'href' attribute of the anchor tag will not be updated. If they attempt to open it using\n             * the right-click context menu with 'Open in new tab/window,' it will still navigate to the link specified\n             * in the 'href' attribute, which may create unnecessary confusion while trying to open the link.\n             *\n             * Using pointer-events: none to disable link interactions can be removed when hyperlink support is added.\n             * see: https://github.com/ni/nimble/issues/1527\n             */ ''\n        }\n        pointer-events: none;\n    }\n\n    :host([disabled]) .ProseMirror a {\n        color: ${bodyDisabledFontColor};\n        fill: currentcolor;\n        cursor: default;\n    }\n\n    ${/** End of anchor styles */ ''}\n\n    ${/* Shared styles for all mention views at edit time. */ ''}\n    .ProseMirror .nimble-mention-view-edit {\n        color: ${bodyFontColor};\n    }\n\n    :host([disabled]) .ProseMirror .nimble-mention-view-edit {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .footer-section {\n        display: flex;\n        justify-content: space-between;\n        flex-shrink: 0;\n        border: 0px;\n        border-top: var(\n                --ni-private-rich-text-editor-footer-section-border-top-width\n            )\n            solid rgba(${borderRgbPartialColor}, 0.1);\n        height: var(--ni-private-rich-text-editor-footer-section-height);\n        overflow: hidden;\n    }\n\n    :host([footer-hidden]) .footer-section {\n        display: none;\n    }\n\n    ${toolbarTag}::part(positioning-region) {\n        background: transparent;\n        padding-right: 8px;\n        box-sizing: border-box;\n        gap: 0px;\n        height: var(--ni-private-rich-text-editor-footer-section-height);\n    }\n\n    ${toolbarTag}::part(start) {\n        gap: 8px;\n    }\n\n    ${buttonTag},\n    ${toggleButtonTag} {\n        height: ${controlSlimHeight};\n    }\n\n    .footer-actions {\n        display: flex;\n        justify-content: flex-end;\n        margin-inline-end: ${standardPadding};\n        gap: ${standardPadding};\n        place-items: center;\n    }\n\n    ::slotted(${buttonTag}),\n    ::slotted(${toggleButtonTag}),\n    ::slotted(${anchorButtonTag}),\n    ::slotted(${menuButtonTag}) {\n        height: ${controlSlimHeight};\n    }\n\n    :host([error-visible]) .error-icon {\n        display: none;\n    }\n\n    :host([error-visible]) .error-icon.scrollbar-width-calculated {\n        display: inline-flex;\n        position: absolute;\n        top: ${mediumPadding};\n        right: var(--ni-private-rich-text-editor-scrollbar-width);\n    }\n`;\n"]}

package/dist/esm/rich-text/viewer/styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../../utilities/style/display';
 import { bodyFont, bodyFontColor, linkFontColor } from '../../theme-provider/design-tokens';
 export const styles = css `
     ${display('flex')}

package/dist/esm/rich-text/viewer/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/rich-text/viewer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,aAAa,EAChB,MAAM,oCAAoC,CAAC;AAE5C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;iBAEP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BxB;AACE,gLAAgL,CAAC,EACrL;;;;;MAKE;AACE;;;;;;;;;;GAUG,CAAC,EACR;;iBAEa,aAAa;;CAE7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    bodyFont,\n    bodyFontColor,\n    linkFontColor\n} from '../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        color: ${bodyFontColor};\n        width: auto;\n        overflow: auto;\n        height: 100%;\n    }\n\n    .viewer {\n        font: inherit;\n        outline: none;\n        box-sizing: border-box;\n        position: relative;\n        color: inherit;\n        overflow-wrap: anywhere;\n    }\n\n    .viewer > :first-child {\n        margin-block-start: 0;\n    }\n\n    .viewer > :last-child {\n        margin-block-end: 0;\n    }\n\n    li > p {\n        margin-block: 0;\n    }\n\n    ${\n        /* In Firefox, if the paragraph within the list is empty, the ordered lists overlap. Therefore, hiding the paragraph element allows for the proper rendering of empty lists.  */ ''\n    }\n    li > p:empty {\n        display: none;\n    }\n\n    ${\n        /**\n         * In the rich-text editor, an absolute link renders as a native anchor, not a `nimble-anchor`. When such a link\n         * is not HTTPS/HTTP, the anchor renders without an `href`, appearing as plain text.\n         * However, in the rich-text viewer, absolute links are rendered as `nimble-anchor`s, and they do not look like\n         * plain text when the `href` attribute is absent. They have a \"disabled\" color and may have an underline.\n         * To ensure a consistent appearance between the editor and viewer, we force the font color to the default link/\n         * plain text color regardless of the `href` attribute's presence. To remove the underline, the markdown parser\n         * emits an `underline-hidden` attribute when the `href` attribute is absent.\n         *\n         * See models/markdown-parser.ts where link elements are emitted for more info.\n         */ ''\n    }\n    nimble-anchor::part(control) {\n        color: ${linkFontColor};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/rich-text/viewer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,aAAa,EAChB,MAAM,oCAAoC,CAAC;AAE5C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;iBAEP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BxB;AACE,gLAAgL,CAAC,EACrL;;;;;MAKE;AACE;;;;;;;;;;GAUG,CAAC,EACR;;iBAEa,aAAa;;CAE7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\nimport {\n    bodyFont,\n    bodyFontColor,\n    linkFontColor\n} from '../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        color: ${bodyFontColor};\n        width: auto;\n        overflow: auto;\n        height: 100%;\n    }\n\n    .viewer {\n        font: inherit;\n        outline: none;\n        box-sizing: border-box;\n        position: relative;\n        color: inherit;\n        overflow-wrap: anywhere;\n    }\n\n    .viewer > :first-child {\n        margin-block-start: 0;\n    }\n\n    .viewer > :last-child {\n        margin-block-end: 0;\n    }\n\n    li > p {\n        margin-block: 0;\n    }\n\n    ${\n        /* In Firefox, if the paragraph within the list is empty, the ordered lists overlap. Therefore, hiding the paragraph element allows for the proper rendering of empty lists.  */ ''\n    }\n    li > p:empty {\n        display: none;\n    }\n\n    ${\n        /**\n         * In the rich-text editor, an absolute link renders as a native anchor, not a `nimble-anchor`. When such a link\n         * is not HTTPS/HTTP, the anchor renders without an `href`, appearing as plain text.\n         * However, in the rich-text viewer, absolute links are rendered as `nimble-anchor`s, and they do not look like\n         * plain text when the `href` attribute is absent. They have a \"disabled\" color and may have an underline.\n         * To ensure a consistent appearance between the editor and viewer, we force the font color to the default link/\n         * plain text color regardless of the `href` attribute's presence. To remove the underline, the markdown parser\n         * emits an `underline-hidden` attribute when the `href` attribute is absent.\n         *\n         * See models/markdown-parser.ts where link elements are emitted for more info.\n         */ ''\n    }\n    nimble-anchor::part(control) {\n        color: ${linkFontColor};\n    }\n`;\n"]}

package/dist/esm/rich-text-mention/base/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/rich-text-mention/base/styles.js

@@ -0,0 +1,6 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '../../utilities/style/display';
+export const styles = css `
+    ${display('none')}
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/rich-text-mention/base/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/rich-text-mention/base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;CACpB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    ${display('none')}\n`;\n"]}

package/dist/esm/rich-text-mention/users/index.js

@@ -6,6 +6,7 @@ import { iconAtTag } from '../../icons/at';
 import { MappingUser } from '../../mapping/user';
 import { RichTextMentionUsersValidator } from './models/rich-text-mention-users-validator';
 import { richTextMentionUsersViewTag } from './view';
+import { styles } from '../base/styles';
 /**
  * Rich Text user mention configuration element which will have MappingMentionUser elements as children
  */
@@ -32,7 +33,8 @@ export class RichTextMentionUsers extends RichTextMention {
 }
 const nimbleRichTextMentionUsers = RichTextMentionUsers.compose({
     baseName: 'rich-text-mention-users',
-    template
+    template,
+    styles
 });
 DesignSystem.getOrCreate()
     .withPrefix('nimble')

package/dist/esm/rich-text-mention/users/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/rich-text-mention/users/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,OAAO,EAAE,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AAQrD;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,eAA8C;IACjE,0BAA0B;QACzC,OAAO;YACH,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,GAAG;YACd,WAAW,EAAE,2BAA2B;YACxC,SAAS,EAAE,IAAI,6BAA6B,EAAE;SACjD,CAAC;IACN,CAAC;IAEkB,0BAA0B;QACzC,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAClC,CAAC;IAES,mBAAmB,CACzB,OAAgC;QAEhC,IAAI,OAAO,YAAY,WAAW,EAAE;YAChC,OAAO,IAAI,iBAAiB,CAAC,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;SAClE;QACD,+EAA+E;QAC/E,mEAAmE;QACnE,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC;CACJ;AACD,MAAM,0BAA0B,GAAG,oBAAoB,CAAC,OAAO,CAAC;IAC5D,QAAQ,EAAE,yBAAyB;IACnC,QAAQ;CACX,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,0BAA0B,EAAE,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,uBAAuB,GAAG,gCAAgC,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport type { MentionInternalsOptions } from '../base/models/mention-internals';\nimport { RichTextMention } from '../base';\nimport type { MappingConfig } from '../base/models/mapping-config';\nimport { MappingUserConfig } from './models/mapping-user-config';\nimport { template } from '../base/template';\nimport { iconAtTag } from '../../icons/at';\nimport { MappingUser } from '../../mapping/user';\nimport type { Mapping } from '../../mapping/base';\nimport type { MappingUserKey } from '../../mapping/base/types';\nimport { RichTextMentionUsersValidator } from './models/rich-text-mention-users-validator';\nimport { richTextMentionUsersViewTag } from './view';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-rich-text-mention-users': RichTextMentionUsers;\n    }\n}\n\n/**\n * Rich Text user mention configuration element which will have MappingMentionUser elements as children\n */\nexport class RichTextMentionUsers extends RichTextMention<RichTextMentionUsersValidator> {\n    protected override getMentionInternalsOptions(): MentionInternalsOptions<RichTextMentionUsersValidator> {\n        return {\n            icon: iconAtTag,\n            character: '@',\n            viewElement: richTextMentionUsersViewTag,\n            validator: new RichTextMentionUsersValidator()\n        };\n    }\n\n    protected override getObservedMappingProperty(): string[] {\n        return ['key', 'displayName'];\n    }\n\n    protected createMappingConfig(\n        mapping: Mapping<MappingUserKey>\n    ): MappingConfig {\n        if (mapping instanceof MappingUser) {\n            return new MappingUserConfig(mapping.key, mapping.displayName);\n        }\n        // Getting here would indicate a programming error, b/c validation will prevent\n        // this function from running when there is an unsupported mapping.\n        throw new Error('Unsupported mapping');\n    }\n}\nconst nimbleRichTextMentionUsers = RichTextMentionUsers.compose({\n    baseName: 'rich-text-mention-users',\n    template\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleRichTextMentionUsers());\nexport const richTextMentionUsersTag = 'nimble-rich-text-mention-users';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/rich-text-mention/users/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,OAAO,EAAE,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,eAA8C;IACjE,0BAA0B;QACzC,OAAO;YACH,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,GAAG;YACd,WAAW,EAAE,2BAA2B;YACxC,SAAS,EAAE,IAAI,6BAA6B,EAAE;SACjD,CAAC;IACN,CAAC;IAEkB,0BAA0B;QACzC,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAClC,CAAC;IAES,mBAAmB,CACzB,OAAgC;QAEhC,IAAI,OAAO,YAAY,WAAW,EAAE;YAChC,OAAO,IAAI,iBAAiB,CAAC,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;SAClE;QACD,+EAA+E;QAC/E,mEAAmE;QACnE,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC;CACJ;AACD,MAAM,0BAA0B,GAAG,oBAAoB,CAAC,OAAO,CAAC;IAC5D,QAAQ,EAAE,yBAAyB;IACnC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,0BAA0B,EAAE,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,uBAAuB,GAAG,gCAAgC,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport type { MentionInternalsOptions } from '../base/models/mention-internals';\nimport { RichTextMention } from '../base';\nimport type { MappingConfig } from '../base/models/mapping-config';\nimport { MappingUserConfig } from './models/mapping-user-config';\nimport { template } from '../base/template';\nimport { iconAtTag } from '../../icons/at';\nimport { MappingUser } from '../../mapping/user';\nimport type { Mapping } from '../../mapping/base';\nimport type { MappingUserKey } from '../../mapping/base/types';\nimport { RichTextMentionUsersValidator } from './models/rich-text-mention-users-validator';\nimport { richTextMentionUsersViewTag } from './view';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-rich-text-mention-users': RichTextMentionUsers;\n    }\n}\n\n/**\n * Rich Text user mention configuration element which will have MappingMentionUser elements as children\n */\nexport class RichTextMentionUsers extends RichTextMention<RichTextMentionUsersValidator> {\n    protected override getMentionInternalsOptions(): MentionInternalsOptions<RichTextMentionUsersValidator> {\n        return {\n            icon: iconAtTag,\n            character: '@',\n            viewElement: richTextMentionUsersViewTag,\n            validator: new RichTextMentionUsersValidator()\n        };\n    }\n\n    protected override getObservedMappingProperty(): string[] {\n        return ['key', 'displayName'];\n    }\n\n    protected createMappingConfig(\n        mapping: Mapping<MappingUserKey>\n    ): MappingConfig {\n        if (mapping instanceof MappingUser) {\n            return new MappingUserConfig(mapping.key, mapping.displayName);\n        }\n        // Getting here would indicate a programming error, b/c validation will prevent\n        // this function from running when there is an unsupported mapping.\n        throw new Error('Unsupported mapping');\n    }\n}\nconst nimbleRichTextMentionUsers = RichTextMentionUsers.compose({\n    baseName: 'rich-text-mention-users',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleRichTextMentionUsers());\nexport const richTextMentionUsersTag = 'nimble-rich-text-mention-users';\n"]}

package/dist/esm/rich-text-mention/users/view/styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../../../utilities/style/display';
 import { mentionFont, mentionFontColor, mentionDisabledFontColor } from '../../../theme-provider/design-tokens';
 export const styles = css `
     ${display('inline-block')}

package/dist/esm/rich-text-mention/users/view/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/rich-text-mention/users/view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EAC3B,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;gBAIb,WAAW;;;;iBAIV,gBAAgB;;;;iBAIhB,wBAAwB;;CAExC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    mentionFont,\n    mentionFontColor,\n    mentionDisabledFontColor\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-block')}\n\n    :host {\n        box-sizing: border-box;\n        font: ${mentionFont};\n    }\n\n    .control {\n        color: ${mentionFontColor};\n    }\n\n    :host([disabled]) .control {\n        color: ${mentionDisabledFontColor};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/rich-text-mention/users/view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EAC3B,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;gBAIb,WAAW;;;;iBAIV,gBAAgB;;;;iBAIhB,wBAAwB;;CAExC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../../utilities/style/display';\nimport {\n    mentionFont,\n    mentionFontColor,\n    mentionDisabledFontColor\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-block')}\n\n    :host {\n        box-sizing: border-box;\n        font: ${mentionFont};\n    }\n\n    .control {\n        color: ${mentionFontColor};\n    }\n\n    :host([disabled]) .control {\n        color: ${mentionDisabledFontColor};\n    }\n`;\n"]}

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

@@ -31,6 +31,7 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
     errorText: string | undefined;
     errorVisible: boolean;
     filterMode: FilterMode;
+    clearable: boolean;
     /**
      * @internal
      */
@@ -85,10 +86,6 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
      * @internal
      */
     filter: string;
-    /**
-     * @internal
-     */
-    committedSelectedOption?: ListboxOption;
     /**
      * The max height for the listbox when opened.
      *
@@ -167,7 +164,7 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
     /**
      * @internal
      */
-    changeValueHandler(): void;
+    clearClickHandler(e: MouseEvent): void;
     /**
      * @internal
      */
@@ -272,7 +269,7 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
     protected setDefaultSelectedOption(): void;
     private setActiveOption;
     private focusAndScrollActiveOptionIntoView;
-    private committedSelectedOptionChanged;
+    private getPlaceholderOption;
     private setPositioning;
     /**
      * Filter available options by text value.
@@ -288,6 +285,7 @@ export declare class Select extends FormAssociatedSelect implements ErrorPattern
      * @internal
      */
     private updateValue;
+    private clearSelect;
     /**
      * Resets and fills the proxy to match the component's options.
      *

package/dist/esm/select/index.js

@@ -19,6 +19,9 @@ const isNimbleListOption = (el) => {
 const isOptionSelectable = (el) => {
     return !el.visuallyHidden && !el.disabled && !el.hidden;
 };
+const isOptionPlaceholder = (el) => {
+    return el.disabled && el.hidden;
+};
 /**
  * A nimble-styled HTML select.
  */
@@ -28,6 +31,7 @@ export class Select extends FormAssociatedSelect {
         this.appearance = DropdownAppearance.underline;
         this.errorVisible = false;
         this.filterMode = FilterMode.none;
+        this.clearable = false;
         /**
          * @internal
          */
@@ -100,13 +104,8 @@ export class Select extends FormAssociatedSelect {
         if (prev !== newValue && !(this.open && this.selectedIndex < 0)) {
             this._value = newValue;
             super.valueChanged(prev, newValue);
-            if (!this.open) {
-                this.committedSelectedOption = this.options.find(o => o.value === newValue);
-            }
             Observable.notify(this, 'value');
-            if (this.collapsible) {
-                Observable.notify(this, 'displayValue');
-            }
+            this.updateDisplayValue();
         }
     }
     /**
@@ -114,7 +113,7 @@ export class Select extends FormAssociatedSelect {
      */
     get displayValue() {
         Observable.track(this, 'displayValue');
-        return this.committedSelectedOption?.text ?? '';
+        return this.firstSelectedOption?.text ?? '';
     }
     /**
      * @internal
@@ -158,7 +157,6 @@ export class Select extends FormAssociatedSelect {
         if (value) {
             this.value = value;
         }
-        this.committedSelectedOption = this.options[this.selectedIndex];
     }
     /**
      * @internal
@@ -203,11 +201,13 @@ export class Select extends FormAssociatedSelect {
                 break;
             }
             case 'selected': {
-                if (isNimbleListOption(sourceElement)) {
+                if (isNimbleListOption(sourceElement)
+                    && sourceElement.selected) {
                     this.selectedIndex = this.options.indexOf(sourceElement);
                 }
-                this.setSelectedOptions();
-                this.updateDisplayValue();
+                else {
+                    this.clearSelect();
+                }
                 break;
             }
             case 'hidden': {
@@ -266,24 +266,25 @@ export class Select extends FormAssociatedSelect {
     /**
      * @internal
      */
-    changeValueHandler() {
-        this.committedSelectedOption = this.options.find(option => option.selected);
+    clearClickHandler(e) {
+        this.open = false;
+        this.clearSelect();
+        this.updateValue(true);
+        e.stopPropagation();
     }
     /**
      * @internal
      */
     updateDisplayValue() {
-        if (this.committedSelectedOption?.disabled
-            && this.committedSelectedOption?.hidden
-            && this.committedSelectedOption?.selected) {
+        const placeholderOption = this.getPlaceholderOption();
+        if (placeholderOption
+            && this.firstSelectedOption === placeholderOption) {
             this.displayPlaceholder = true;
         }
         else {
             this.displayPlaceholder = false;
         }
-        if (this.collapsible) {
-            Observable.notify(this, 'displayValue');
-        }
+        Observable.notify(this, 'displayValue');
     }
     /**
      * Handle content changes on the control input.
@@ -373,6 +374,11 @@ export class Select extends FormAssociatedSelect {
             }
             case keyEscape: {
                 if (!this.open) {
+                    if (this.clearable) {
+                        this.clearSelect();
+                        this.updateValue(true);
+                        return true;
+                    }
                     break;
                 }
                 if (this.collapsible && this.open) {
@@ -520,10 +526,10 @@ export class Select extends FormAssociatedSelect {
         // for more info.
         this.options.push(option);
     }
-    // Prevents parent classes from resetting selectedIndex to a positive
-    // value while filtering, which can result in a disabled option being
-    // selected.
     setSelectedOptions() {
+        // Prevents parent classes from resetting selectedIndex to a positive
+        // value while filtering, which can result in a disabled option being
+        // selected.
         if (this.open && this.selectedIndex === -1) {
             return;
         }
@@ -619,12 +625,17 @@ export class Select extends FormAssociatedSelect {
         };
         let selectedIndex = -1;
         let firstValidOptionIndex = -1;
+        let placeholderIndex = -1;
         for (let i = 0; i < options?.length; i++) {
             const option = options[i];
-            if (optionIsSelected(option) || option?.value === this.value) {
+            if (optionIsSelected(option) || option.value === this.value) {
                 selectedIndex = i;
+                break;
             }
-            if (firstValidOptionIndex === -1
+            else if (placeholderIndex === -1 && isOptionPlaceholder(option)) {
+                placeholderIndex = i;
+            }
+            else if (firstValidOptionIndex === -1
                 && isOptionSelectable(option)) {
                 firstValidOptionIndex = i;
             }
@@ -632,13 +643,15 @@ export class Select extends FormAssociatedSelect {
         if (selectedIndex !== -1) {
             this.selectedIndex = selectedIndex;
         }
+        else if (placeholderIndex !== -1) {
+            this.selectedIndex = placeholderIndex;
+        }
         else if (firstValidOptionIndex !== -1) {
             this.selectedIndex = firstValidOptionIndex;
         }
         else {
             this.selectedIndex = 0;
         }
-        this.committedSelectedOption = options[this.selectedIndex];
     }
     setActiveOption(newActiveIndex) {
         const activeOption = this.options[newActiveIndex];
@@ -674,8 +687,8 @@ export class Select extends FormAssociatedSelect {
             });
         }
     }
-    committedSelectedOptionChanged() {
-        this.updateDisplayValue();
+    getPlaceholderOption() {
+        return this.options.find(o => o.hidden && o.disabled);
     }
     setPositioning() {
         if (!this.$fastController.isConnected) {
@@ -750,6 +763,12 @@ export class Select extends FormAssociatedSelect {
             });
         }
     }
+    clearSelect() {
+        const placeholder = this.getPlaceholderOption();
+        this.selectedIndex = placeholder
+            ? this.options.indexOf(placeholder)
+            : -1;
+    }
     /**
      * Resets and fills the proxy to match the component's options.
      *
@@ -776,7 +795,6 @@ export class Select extends FormAssociatedSelect {
         this.updateListboxMaxHeightCssVariable();
     }
     initializeOpenState() {
-        this.committedSelectedOption = this.options[this.selectedIndex];
         this.setActiveOption(this.selectedIndex);
         this.ariaControls = this.listboxId;
         this.ariaExpanded = 'true';
@@ -804,6 +822,9 @@ __decorate([
 __decorate([
     attr({ attribute: 'filter-mode' })
 ], Select.prototype, "filterMode", void 0);
+__decorate([
+    attr({ attribute: 'clearable', mode: 'boolean' })
+], Select.prototype, "clearable", void 0);
 __decorate([
     observable
 ], Select.prototype, "displayPlaceholder", void 0);
@@ -834,9 +855,6 @@ __decorate([
 __decorate([
     observable
 ], Select.prototype, "filter", void 0);
-__decorate([
-    observable
-], Select.prototype, "committedSelectedOption", void 0);
 __decorate([
     observable
 ], Select.prototype, "maxHeight", void 0);