@arbetsformedlingen/yrkesvaljaren 2.0.5

package/dist/collection/components/core-selector/core-selector.css

@@ -0,0 +1,803 @@
+/*
+ * Minimal AF design compatibility tokens and primitives.
+ * Values are adapted from the AF design system v37.0.2 (Apache-2.0) so the
+ * selectors can render without loading the full design system runtime.
+ */
+
+:host {
+  --digi--grayscale-0: #ffffff;
+  --digi--grayscale-50: #fbfbfb;
+  --digi--grayscale-100: #f4f4f4;
+  --digi--grayscale-200: #ededed;
+  --digi--grayscale-300: #e4e4e4;
+  --digi--grayscale-400: #dddddd;
+  --digi--grayscale-500: #cacaca;
+  --digi--grayscale-600: #acacac;
+  --digi--grayscale-700: #757575;
+  --digi--grayscale-800: #5c5c5c;
+  --digi--grayscale-900: #333333;
+  --digi--grayscale-1000: #000000;
+
+  --digi--global--color--cta--link--base: #1616b2;
+  --digi--global--color--function--danger--base: #da0000;
+  --digi--global--color--function--success--base: #008a20;
+  --digi--global--color--function--success--lightest-3: #d4edda;
+  --digi--global--color--function--warning--base: #ffe200;
+
+  --digi--color--text--primary: var(--digi--grayscale-900);
+  --digi--color--text--secondary: var(--digi--grayscale-700);
+  --digi--color--text--link: var(--digi--global--color--cta--link--base);
+  --digi--color--icons--success: var(--digi--global--color--function--success--base);
+  --digi--color--icons--warning: #8a7a00;
+  --digi--color--icons--danger: var(--digi--global--color--function--danger--base);
+
+  --digi--global--typography--font-family--default: "Open Sans", Arial, sans-serif;
+  --digi--global--typography--font-size--base: 1rem;
+  --digi--global--typography--font-size--small: 0.875rem;
+  --digi--global--typography--font-weight--regular: 400;
+  --digi--global--typography--font-weight--semibold: 600;
+  --digi--global--typography--font-weight--bold: 700;
+  --digi--global--typography--line-height--base: 1.5;
+
+  --digi--typography--label--font-size--desktop: 1rem;
+  --digi--typography--label--font-weight--desktop: 600;
+  --digi--typography--label--line-height--desktop: 1.5;
+  --digi--typography--label-description--font-size--desktop: 1rem;
+  --digi--typography--label-description--line-height--desktop: 1.5;
+  --digi--typography--tag--font-size--desktop: 0.875rem;
+
+  --digi--gutter--icon: 0.625rem;
+  --digi--gutter--smaller: 0.75rem;
+  --digi--gutter--small: 0.875rem;
+  --digi--gutter--medium: 1rem;
+  --digi--border-width--primary: 1px;
+  --digi--border-style--primary: solid;
+  --digi--border-radius--primary: 0;
+  --digi--border-radius--secondary: 6px;
+
+  --af-tag-color: #091d54;
+  --af-tag-hover-background: #ddf1fc;
+}
+
+.af-form-label {
+  color: var(--digi--color--text--primary);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--digi--global--typography--font-family--default);
+  font-size: var(--digi--typography--label--font-size--desktop);
+  margin-bottom: 0.5rem;
+}
+
+.af-form-label__label {
+  cursor: pointer;
+  display: block;
+  font-weight: var(--digi--typography--label--font-weight--desktop);
+  line-height: var(--digi--typography--label--line-height--desktop);
+}
+
+.af-form-label__description {
+  display: block;
+  font-size: var(--digi--typography--label-description--font-size--desktop);
+  line-height: var(--digi--typography--label-description--line-height--desktop);
+  max-width: 35rem;
+}
+
+.af-validation-message {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.af-validation-message__icon {
+  flex: 0 0 auto;
+  height: 1.25em;
+  margin-inline-end: var(--digi--gutter--icon);
+  width: 1.25em;
+}
+
+.af-validation-message__icon--success,
+.af-validation-message__icon--error {
+  background-color: var(--af-validation-icon-color, currentColor);
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+.af-validation-message__icon--success {
+  --af-validation-icon-color: var(--digi--color--icons--success);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath d='M25 12.5C25 19.404 19.404 25 12.5 25S0 19.404 0 12.5 5.596 0 12.5 0 25 5.596 25 12.5zm-13.946 6.619l9.274-9.275a.806.806 0 000-1.14l-1.14-1.14a.806.806 0 00-1.14 0l-7.564 7.563-3.531-3.531a.807.807 0 00-1.14 0l-1.141 1.14a.806.806 0 000 1.14l5.242 5.243a.806.806 0 001.14 0z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath d='M25 12.5C25 19.404 19.404 25 12.5 25S0 19.404 0 12.5 5.596 0 12.5 0 25 5.596 25 12.5zm-13.946 6.619l9.274-9.275a.806.806 0 000-1.14l-1.14-1.14a.806.806 0 00-1.14 0l-7.564 7.563-3.531-3.531a.807.807 0 00-1.14 0l-1.141 1.14a.806.806 0 000 1.14l5.242 5.243a.806.806 0 001.14 0z'/%3E%3C/svg%3E");
+}
+
+.af-validation-message__icon--error {
+  --af-validation-icon-color: var(--digi--color--icons--danger);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M34.4328058,0 C35.5494848,0 36.5900526,0.609146757 37.1483921,1.58958113 L47.5812454,19.9104189 C48.1395849,20.8909496 48.1395849,22.1090504 47.5812454,23.0895811 L37.1483921,41.4104189 C36.5900526,42.3908532 35.5494848,43 34.4328058,43 L13.5671942,43 C12.4505152,43 11.4099474,42.3908532 10.8516079,41.4104189 L0.41875464,23.0895811 C-0.13958488,22.1090504 -0.13958488,20.8909496 0.41875464,19.9104189 L10.8516079,1.58958113 C11.4099474,0.609146757 12.4505152,0 13.5671942,0 Z M18.6736823,12.3728178 C18.2711762,11.964729 17.6203819,11.964729 17.2178757,12.3728178 L15.2825964,14.334939 C14.8800903,14.7430278 14.8800903,15.4028485 15.2825964,15.8109373 L20.6089616,21.2111779 L15.2825964,26.6114185 C14.8800903,27.0195074 14.8800903,27.6793281 15.2825964,28.0874169 L17.2178757,30.049538 C17.6203819,30.4576269 18.2711762,30.4576269 18.6736823,30.049538 L24.0000475,24.6492974 L29.3264127,30.049538 C29.7289188,30.4576269 30.3797132,30.4576269 30.7822193,30.049538 L32.7174986,28.0874169 C33.1200048,27.6793281 33.1200048,27.0195074 32.7174986,26.6114185 L27.3911334,21.2111779 L32.7174986,15.8109373 C33.1200048,15.4028485 33.1200048,14.7430278 32.7174986,14.334939 L30.7822193,12.3728178 C30.3797132,11.964729 29.7289188,11.964729 29.3264127,12.3728178 L24.0000475,17.7730584 Z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M34.4328058,0 C35.5494848,0 36.5900526,0.609146757 37.1483921,1.58958113 L47.5812454,19.9104189 C48.1395849,20.8909496 48.1395849,22.1090504 47.5812454,23.0895811 L37.1483921,41.4104189 C36.5900526,42.3908532 35.5494848,43 34.4328058,43 L13.5671942,43 C12.4505152,43 11.4099474,42.3908532 10.8516079,41.4104189 L0.41875464,23.0895811 C-0.13958488,22.1090504 -0.13958488,20.8909496 0.41875464,19.9104189 L10.8516079,1.58958113 C11.4099474,0.609146757 12.4505152,0 13.5671942,0 Z M18.6736823,12.3728178 C18.2711762,11.964729 17.6203819,11.964729 17.2178757,12.3728178 L15.2825964,14.334939 C14.8800903,14.7430278 14.8800903,15.4028485 15.2825964,15.8109373 L20.6089616,21.2111779 L15.2825964,26.6114185 C14.8800903,27.0195074 14.8800903,27.6793281 15.2825964,28.0874169 L17.2178757,30.049538 C17.6203819,30.4576269 18.2711762,30.4576269 18.6736823,30.049538 L24.0000475,24.6492974 L29.3264127,30.049538 C29.7289188,30.4576269 30.3797132,30.4576269 30.7822193,30.049538 L32.7174986,28.0874169 C33.1200048,27.6793281 33.1200048,27.0195074 32.7174986,26.6114185 L27.3911334,21.2111779 L32.7174986,15.8109373 C33.1200048,15.4028485 33.1200048,14.7430278 32.7174986,14.334939 L30.7822193,12.3728178 C30.3797132,11.964729 29.7289188,11.964729 29.3264127,12.3728178 L24.0000475,17.7730584 Z'/%3E%3C/svg%3E");
+}
+
+.af-validation-message__icon--warning {
+  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='6.75' fill='%23333'/%3E%3Cpath d='m18 9c0 4.9717-4.0298 9-9 9-4.9702 0-9-4.0283-9-9 0-4.9688 4.0298-9 9-9 4.9702 0 9 4.0312 9 9zm-9 1.8145c-0.92196 0-1.6694 0.7474-1.6694 1.6694 0 0.92196 0.7474 1.6694 1.6694 1.6694s1.6694-0.7474 1.6694-1.6694c0-0.92196-0.7474-1.6694-1.6694-1.6694zm-1.3157-1.065c0.012593 0.23095 0.20355 0.41175 0.43483 0.41175h1.7618c0.23128 0 0.42224-0.1808 0.43483-0.41175l0.2692-4.9355c0.013609-0.24946-0.18501-0.45922-0.43483-0.45922h-2.3002c-0.24982 0-0.4484 0.20976-0.43479 0.45922l0.2692 4.9355z' fill='%23FFE200'/%3E%3C/svg%3E");
+  position: relative;
+  top: 3px;
+}
+
+.af-validation-message__text {
+  color: var(--digi--color--text--primary);
+  flex: 1;
+  font-family: var(--digi--global--typography--font-family--default);
+  font-size: var(--digi--typography--tag--font-size--desktop);
+  transform: translateY(1px);
+}
+
+.af-tag {
+  display: block;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.af-tag__button {
+  align-items: center;
+  background: var(--digi--grayscale-0);
+  border: var(--digi--border-width--primary) var(--digi--border-style--primary) var(--af-tag-color);
+  border-radius: var(--digi--border-radius--secondary);
+  color: var(--af-tag-color);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--digi--global--typography--font-family--default);
+  font-size: 0.875rem;
+  font-weight: var(--digi--global--typography--font-weight--semibold);
+  gap: 10px;
+  height: auto;
+  max-width: 100%;
+  min-height: unset;
+  min-width: 0;
+  padding: 6px 8px;
+  text-align: left;
+  white-space: normal;
+}
+
+.af-tag__button:hover {
+  background: var(--af-tag-hover-background);
+}
+
+.af-tag__button:focus-visible {
+  background: var(--af-tag-hover-background);
+  border-color: var(--af-tag-color);
+  outline: 2px solid var(--digi--grayscale-1000);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 5px var(--digi--grayscale-0);
+}
+
+.af-tag__button:active {
+  background: var(--af-tag-hover-background);
+}
+
+.af-tag__text {
+  display: inline-block;
+  max-width: 100%;
+  min-width: 0;
+  white-space: normal;
+}
+
+.af-tag__text--break {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.af-tag__remove-icon {
+  flex: 0 0 auto;
+  height: 1em;
+  min-height: 0 !important;
+  width: 1em;
+}
+
+
+/* src/components/core-selector/core-selector.css */
+/* Migrated from yrkesvaljaren.css to ensure identical design */
+
+:host {
+    /* === DIMENSIONER (exponerade för konsumenter) === */
+    --selector-width: var(--cs-width, 100%);
+    --selector-min-width: var(--cs-min-width, 200px);
+    --selector-max-width: var(--cs-max-width, none);
+    --selector-height: var(--cs-height, auto);
+    --selector-min-height: var(--cs-min-height, auto);
+    --selector-max-height: var(--cs-max-height, none);
+
+    --selector-font-family: var(--global-font-family, 'Open Sans', sans-serif);
+    --selector-font-size: var(--cs-font-size, 1rem);
+    --selector-text-color: var(--cs-text-color, #212529);
+    --selector-placeholder-color: var(--cs-placeholder-color, #6c757d);
+    --selector-border-color: var(--cs-border-color, #d1d5db);
+    --selector-focus-border-color: var(--cs-focus-border-color, #86b7fe);
+    --selector-focus-shadow: var(--cs-focus-shadow, 0 0 0 0.25rem rgba(13, 110, 253, 0.25));
+    --selector-background-color: var(--cs-background-color, #fff);
+    --selector-icon-color: var(--cs-icon-color, #6c757d);
+    --selector-clear-button-color: var(--cs-clear-button-color, #6c757d);
+    --selector-clear-button-hover-color: var(--cs-clear-button-hover-color, #212529);
+
+    --selector-suggestion-background-color: var(--cs-suggestion-background-color, #fff);
+    --selector-suggestion-border-color: var(--cs-suggestion-border-color, #ced4da);
+    --selector-suggestion-hover-background: var(--cs-suggestion-hover-background, #e9ecef);
+    --selector-suggestion-active-background: var(--cs-suggestion-active-background, #dde4eb);
+    --selector-suggestion-text-color: var(--cs-suggestion-text-color, #212529);
+    --selector-suggestion-highlight-weight: var(--cs-suggestion-highlight-weight, bold);
+
+    --selector-error-color: var(--cs-error-color, #dc3545);
+    --selector-loading-color: var(--cs-loading-color, #6c757d);
+
+    /* SIZE DEFAULTS (Medium) */
+    --selector-container-min-height: 40px;
+    --selector-padding-y: 6px;
+    --selector-padding-x: 10px;
+    --selector-icon-size: 1.1em;
+    --selector-gap: 6px;
+
+    --cs-row-height: 32px; /* Reduced for better compactness */
+
+    display: flex;
+    flex-direction: column;
+    width: var(--selector-width);
+    min-width: var(--selector-min-width);
+    max-width: var(--selector-max-width);
+    height: var(--selector-height);
+    min-height: var(--selector-min-height);
+    max-height: var(--selector-max-height);
+    font-family: var(--selector-font-family);
+    font-size: var(--selector-font-size);
+    color: var(--selector-text-color);
+    position: relative;
+}
+
+/* --- SIZE MODIFIERS --- */
+
+:host([cs-size="small"]) {
+    --selector-container-min-height: 32px;
+    --selector-padding-y: 2px;
+    --selector-icon-size: 1em;
+    --selector-gap: 4px;
+    --cs-row-height: 28px;
+}
+
+:host([cs-size="medium"]) {
+    --selector-container-min-height: 40px;
+    --selector-padding-y: 6px;
+    --cs-row-height: 32px;
+}
+
+:host([cs-size="large"]) {
+    --selector-container-min-height: 48px;
+    --selector-padding-y: 10px;
+    --selector-icon-size: 1.25em;
+    --selector-gap: 8px;
+    --cs-row-height: 40px;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+.core-selector-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: inherit;
+}
+
+.af-form-label {
+    margin-bottom: 0.5rem;
+}
+
+.search-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px;
+    border: 1px solid #757575;
+    border-radius: 0px;
+    padding: var(--selector-padding-y) var(--selector-padding-x);
+    flex: 1;
+    min-height: var(--selector-container-min-height);
+    cursor: text;
+    background-color: var(--selector-background-color);
+    position: relative;
+    overflow: hidden;
+}
+
+.search-container:focus-within {
+    outline: 2px solid black;
+    outline-offset: 2px;
+}
+
+.search-container.is-inactive-selected .selector-input-field {
+    caret-color: transparent;
+    cursor: default;
+}
+
+/* Hide suggestions when an item is selected in single mode, 
+   even if the component technically has focus */
+.is-inactive-selected + .suggestions-box-container {
+    display: none !important;
+}
+
+.search-container.is-inactive-selected .search-icon-container {
+    display: none;
+}
+
+.search-container.is-inactive-selected .input-area {
+    padding-left: 0;
+}
+
+.input-controls-wrapper {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.search-icon-container {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 20px;
+    height: 20px;
+    transform: translateY(-50%);
+    z-index: 1;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    opacity: 1;
+    max-height: 100%;
+}
+
+.search-icon-container.is-hidden {
+    opacity: 0;
+    transform: translateY(-50%) scale(0.7);
+}
+
+.selector-search-icon {
+    color: var(--digi--color--icon--primary, #333);
+    display: block;
+    flex: 0 0 auto;
+    width: 20px;
+    height: 20px;
+}
+
+.clear-button > span {
+    color: var(--digi--color--icon--primary, #333);
+}
+
+.input-area {
+    flex: 1;
+    min-width: 0;
+    padding-left: 27px;
+    display: flex;
+    align-items: center;
+    transition: padding-left 0.2s ease-in-out;
+}
+
+.input-area.has-value {
+    padding-left: 0;
+}
+
+.selector-input-field {
+    width: 100%;
+    font-family: inherit;
+    font-size: var(--selector-font-size);
+    color: inherit;
+    border: none;
+    outline: none;
+    background: transparent;
+    transition: padding-right 0.2s ease-in-out;
+}
+
+.search-container.has-input .selector-input-field {
+    padding-right: 0;
+}
+
+.selector-input-field::placeholder {
+    color: var(--selector-placeholder-color);
+    opacity: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.clear-button {
+    position: static;
+    flex-shrink: 0;
+    opacity: 0;
+    pointer-events: none;
+    z-index: 2;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    height: 20px;
+    width: 20px;
+    cursor: pointer;
+    color: var(--selector-clear-button-color);
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
+}
+
+.clear-button.is-visible {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.clear-button:hover,
+.clear-button:focus {
+    color: var(--selector-clear-button-hover-color);
+    outline: none;
+}
+
+/* --- Multi-select --- */
+.search-container.multi-search-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: stretch;
+    padding-top: var(--selector-padding-y);
+    padding-bottom: var(--selector-padding-y);
+    width: 100%;
+    max-width: 100%;
+}
+
+.selected-tags-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+}
+
+.selected-tags-wrapper .af-tag {
+    display: block;
+    max-width: 100%;
+    min-width: 0;
+}
+
+.selected-tags-wrapper .af-tag__button {
+    white-space: normal !important;
+    height: auto !important;
+    text-align: left !important;
+    word-break: break-word !important;
+    overflow-wrap: anywhere !important;
+    max-width: 100% !important;
+}
+
+/* --- Single select displayed value --- */
+.search-container.single-value-display {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 0.5rem;
+    min-height: var(--selector-container-min-height);
+    padding: var(--selector-padding-y) var(--selector-padding-x);
+}
+
+.selected-text-in-box {
+    flex-grow: 1;
+    white-space: normal;
+    word-break: break-word;
+    min-width: 0;
+    line-height: inherit;
+}
+
+.search-container.single-value-display .clear-button {
+    position: static;
+    transform: none;
+    opacity: 1;
+    pointer-events: auto;
+    flex-shrink: 0;
+}
+
+/* --- Suggestions --- */
+.combobox-container {
+    position: relative;
+    margin-top: 0;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+.suggestions-box-container {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 100;
+}
+
+.suggestions-box-container.is-hidden-list {
+    z-index: 101;
+    pointer-events: none;
+}
+
+.suggestions-box {
+    position: relative;
+    /* Container for absolute/sticky children */
+    background-color: white;
+    border: 1px solid var(--selector-suggestion-border-color);
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    overflow-y: auto;
+    margin: 2px 0px;
+    
+    /* Strict height limit based on 10 items + header buffer */
+    max-height: calc(var(--max-visible-rows, 10) * var(--cs-row-height) + 40px);
+}
+
+.suggestion-item {
+    display: flex;
+    align-items: center;
+    min-height: var(--cs-row-height);
+    height: auto;
+    padding: 6px 1rem;
+    font-size: inherit;
+    line-height: 1.25;
+    cursor: pointer;
+    color: var(--selector-suggestion-text-color);
+    list-style: none;
+    transition: background-color 0.15s ease, color 0.15s ease;
+    white-space: normal !important;
+    word-break: break-word !important;
+    overflow-wrap: anywhere !important;
+    position: relative;
+    z-index: 1;
+    box-sizing: border-box;
+}
+
+.suggestion-item > span {
+    transition: font-weight 0.2s ease, transform 0.2s ease;
+    display: inline;
+    vertical-align: middle;
+    white-space: normal;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+}
+
+.suggestion-item:hover,
+.suggestion-item.active-suggestion {
+    background-color: var(--selector-suggestion-active-background);
+}
+
+.suggestion-item.active-suggestion.is-keyboard-focus {
+    outline: 1px solid black;
+    outline-offset: -1px;
+}
+
+.suggestion-item.is-selected {
+    color: var(--selector-suggestion-text-color) !important;
+    cursor: default;
+    background-color: #f2f2f2 !important;
+}
+
+.suggestion-item.is-selected span {
+    font-weight: 600;
+}
+
+.selection-indicator-icon {
+    width: 0;
+    height: 20px;
+    opacity: 0;
+    transform: scale(0.5);
+    margin-right: 0;
+    transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
+                opacity 0.2s ease, 
+                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
+                margin-right 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    color: var(--digi--grayscale-800, #333);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.suggestion-item.is-selected .selection-indicator-icon {
+    width: 24px;
+    opacity: 1;
+    transform: scale(1);
+    margin-right: 8px;
+}
+
+.suggestion-item.is-selected.active-suggestion {
+    background-color: #f2f2f2 !important;
+}
+
+.suggestion-item .suggestion-text strong,
+.suggestion-item .match-highlight {
+    font-weight: var(--selector-suggestion-highlight-weight);
+    color: inherit;
+    display: inline;
+}
+
+.metadata-dimmed,
+.occupation-variant-label {
+    font-size: 1rem;
+    color: var(--digi--grayscale-700, #757575);
+    margin-left: 0.25rem;
+    display: inline;
+    vertical-align: baseline;
+    line-height: inherit;
+    white-space: normal;
+}
+
+.suggestion-item.no-results {
+    color: var(--selector-placeholder-color);
+    cursor: default;
+    padding: 0.5rem 1rem;
+    font-style: italic;
+    text-align: center;
+    height: auto;
+}
+
+/* --- Validation --- */
+.search-container.has-validation-error {
+    border-color: var(--selector-error-color);
+    border-width: 2px;
+    background-color: #fef3f2;
+}
+
+.search-container.has-positive-validation {
+    border-color: #155724;
+    background-color: #d4edda;
+}
+
+.status-message {
+    margin-top: 0.5rem;
+}
+
+.selector-validation-message {
+    margin-top: 0.5rem;
+    display: block;
+}
+
+.visually-hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+}
+
+/* Browser search cancel removal */
+input::-webkit-search-decoration,
+input::-webkit-search-cancel-button,
+input::-webkit-search-results-button,
+input::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+    display: none;
+}
+
+input::-ms-clear {
+    display: none;
+    width: 0;
+    height: 0;
+}
+
+/* --- List Header & Toast Container --- */
+.list-header-container {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: #f8f9fa;
+    border-bottom: 1px solid var(--selector-suggestion-border-color);
+    min-height: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.list-header-container ::slotted([slot="suggestions-overlay"]) {
+    position: absolute !important;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 20;
+}
+
+.suggestions-box > ::slotted([slot="suggestions-overlay"]) {
+    position: sticky !important;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 20;
+}
+
+.list-header {
+    display: flex;
+    align-items: center;
+    min-height: var(--cs-row-height);
+    padding: 6px 1rem;
+    font-size: 0.875rem;
+    line-height: 1.25;
+    color: var(--digi--grayscale-700, #757575);
+    border-bottom: 1px solid var(--selector-suggestion-border-color, #ced4da);
+}
+
+.list-header span {
+    font-size: 0.875rem;
+    font-weight: normal;
+}
+
+.history-clear-link {
+    color: var(--digi--grayscale-700, #757575);
+    text-decoration: underline;
+    cursor: pointer;
+    margin-left: 0.25rem;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    font: inherit;
+}
+
+.history-clear-link:hover {
+    color: var(--digi--grayscale-900, #222);
+}
+
+/* Remove old animations */
+@keyframes cs-shrink-fade { from { opacity: 1; } to { opacity: 1; } }
+@keyframes cs-collapse { from { height: auto; } to { height: auto; } }
+
+/* --- Toast Notification (Sticky Overlay) --- */
+.cs-toast {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    background-color: #f8fdf0;
+    animation: cs-toastSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    pointer-events: none;
+    box-sizing: border-box;
+}
+
+.cs-toast.is-closing {
+    animation: cs-toastSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.cs-toast-text {
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #2e7d32;
+}
+
+@keyframes cs-toastSlideDown {
+    from { transform: translateY(-100%); }
+    to { transform: translateY(0); }
+}
+
+@keyframes cs-toastSlideUp {
+    from { transform: translateY(0); }
+    to { transform: translateY(-100%); }
+}
+
+.selector-input-field.visually-hidden-selected {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}