@besaitech/ng-design-system 0.0.26 → 0.0.32

package/fesm2022/besaitech-ng-design-system.mjs

@@ -29,6 +29,9 @@ const SDS_ICONS = {
     'user-plus': '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/>',
     hand: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hand-icon lucide-hand"><path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2"/><path d="M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2"/><path d="M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/></svg>',
     users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
+    // Couriers. The back-office and the courier-facing screens both name a rider, and every Belvigo
+    // surface that does should draw the same one.
+    bike: '<circle cx="18.5" cy="17.5" r="3.5"/><circle cx="5.5" cy="17.5" r="3.5"/><circle cx="15" cy="5" r="1"/><path d="M12 17.5V14l-3-3 4-3 2 3h2"/>',
     'building-2': '<path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/>',
     package: '<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/><path d="M12 22V12"/><polyline points="3.29 7 12 12 20.71 7"/><path d="m7.5 4.27 9 5.15"/>',
     'package-plus': '<path d="M16 16h6"/><path d="M19 13v6"/><path d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0"/><path d="m7.5 4.27 9 5.15"/><polyline points="3.29 7 12 12 20.71 7"/><path d="M12 22V12"/>',
@@ -138,7 +141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }] } });
 
-const BASE = 'inline-flex items-center justify-center gap-2 font-medium rounded-control ' +
+const BASE = 'inline-flex items-center justify-center gap-2 font-medium ' +
     'transition-colors duration-150 select-none whitespace-nowrap cursor-pointer ' +
     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ' +
     'focus-visible:ring-brand-500 disabled:opacity-50 disabled:pointer-events-none';
@@ -169,6 +172,13 @@ const ICON_ONLY = {
 class SdsButton {
     variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * `pill` fully rounds the button. It is the shape a consumer-facing surface tends to want for its
+     * primary action, and the same axis {@link SdsInput} exposes — a design system with pill inputs and
+     * no pill buttons would force any app that wants one back onto hand-rolled classes for its single
+     * most important control.
+     */
+    shape = input('control', ...(ngDevMode ? [{ debugName: "shape" }] : []));
     type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
@@ -200,6 +210,7 @@ class SdsButton {
         const size = this.size();
         return [
             BASE,
+            this.shape() === 'pill' ? 'rounded-full' : 'rounded-control',
             VARIANTS$2[this.variant()],
             SIZES$9[size],
             this.iconOnly() ? ICON_ONLY[size] : '',
@@ -209,7 +220,7 @@ class SdsButton {
             .join(' ');
     }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsButton, isStandalone: true, selector: "sds-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "hostClass()", "attr.aria-disabled": "(disabled() || loading()) ? \"true\" : null", "style.pointer-events": "(disabled() || loading()) ? \"none\" : null" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsButton, isStandalone: true, selector: "sds-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "hostClass()", "attr.aria-disabled": "(disabled() || loading()) ? \"true\" : null", "style.pointer-events": "(disabled() || loading()) ? \"none\" : null" } }, ngImport: i0, template: `
     <button
       [type]="type()"
       [disabled]="disabled() || loading()"
@@ -251,7 +262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       <ng-content select="[sdsIconTrailing]" />
     </button>
   `, styles: [".sds-spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:9999px;animation:sds-spin .6s linear infinite}@keyframes sds-spin{to{transform:rotate(360deg)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 let nextId$a = 0;
 const SIZES$8 = {
@@ -273,11 +284,33 @@ class SdsInput {
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
     error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    /**
+     * `search` is the semantically right type for a search field, and the template strips the WebKit
+     * search decorations that come with it. Without that, a `search` field with {@link clearable} draws
+     * TWO clear buttons — the component's and the browser's own, which no stylesheet can reach and which
+     * sits outside the field's own padding.
+     */
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * `filled` is a borderless field on a muted ground, for a search box that has to sit inside a page
+     * rather than announce itself as a form control — a storefront's search pill above all.
+     * `on-brand` is the same field tuned for a dark surface.
+     */
     appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /**
+     * `pill` fully rounds the field. Separate from {@link appearance} on purpose: a bordered pill and a
+     * filled box are both real designs, and folding the two axes into one enum would forbid half of them.
+     */
+    shape = input('control', ...(ngDevMode ? [{ debugName: "shape" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Accessible name for the clear button. French default so existing consumers are unchanged, but an
+     * app serving more than one language MUST translate it — it is an icon-only control, so this string
+     * is its only name.
+     */
+    clearLabel = input('Effacer', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
     leadingIcon = input(null, ...(ngDevMode ? [{ debugName: "leadingIcon" }] : []));
     trailingIcon = input(null, ...(ngDevMode ? [{ debugName: "trailingIcon" }] : []));
     /**
@@ -299,6 +332,8 @@ class SdsInput {
     value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
     onBrand = computed(() => this.appearance() === 'on-brand', ...(ngDevMode ? [{ debugName: "onBrand" }] : []));
+    filled = computed(() => this.appearance() === 'filled', ...(ngDevMode ? [{ debugName: "filled" }] : []));
+    pill = computed(() => this.shape() === 'pill', ...(ngDevMode ? [{ debugName: "pill" }] : []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     describedBy = computed(() => {
         if (this.error())
@@ -308,15 +343,29 @@ class SdsInput {
         return null;
     }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
     fieldPadding = computed(() => {
-        const left = this.leadingIcon() ? 'pl-10' : 'pl-3.5';
-        const right = this.trailingIcon() || this.clearable() || this.trailingAction() ? 'pr-10' : 'pr-3.5';
+        const inset = this.pill() ? 'pl-11' : 'pl-10';
+        const bare = this.pill() ? 'pl-5' : 'pl-3.5';
+        const left = this.leadingIcon() ? inset : bare;
+        const right = this.trailingIcon() || this.clearable() || this.trailingAction()
+            ? 'pr-10'
+            : this.pill()
+                ? 'pr-5'
+                : 'pr-3.5';
         return `${left} ${right}`;
     }, ...(ngDevMode ? [{ debugName: "fieldPadding" }] : []));
     wrapperClasses = computed(() => {
-        const parts = [SIZES$8[this.size()]];
+        const parts = [SIZES$8[this.size()], this.pill() ? 'rounded-full' : 'rounded-control'];
         if (this.isDisabled())
             parts.push('opacity-60 cursor-not-allowed');
-        if (this.onBrand()) {
+        if (this.filled()) {
+            // border-transparent, not border-0: the border box is what keeps a filled field the same height
+            // as a bordered one, so the two sit level when a toolbar mixes them.
+            parts.push('border-transparent bg-muted text-ink');
+            parts.push(this.error()
+                ? 'border-danger focus-within:ring-2 focus-within:ring-danger/30'
+                : 'focus-within:ring-2 focus-within:ring-brand-500/25');
+        }
+        else if (this.onBrand()) {
             parts.push('bg-white/10 text-white');
             parts.push(this.error()
                 ? 'border-danger focus-within:ring-2 focus-within:ring-danger/30'
@@ -356,7 +405,7 @@ class SdsInput {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsInput, isStandalone: true, selector: "sds-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingAction: { classPropertyName: "trailingAction", publicName: "trailingAction", isSignal: true, isRequired: false, transformFunction: null }, trailingActionLabel: { classPropertyName: "trailingActionLabel", publicName: "trailingActionLabel", isSignal: true, isRequired: false, transformFunction: null }, trailingActionPressed: { classPropertyName: "trailingActionPressed", publicName: "trailingActionPressed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { trailingActionClick: "trailingActionClick" }, host: { classAttribute: "block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsInput, isStandalone: true, selector: "sds-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingAction: { classPropertyName: "trailingAction", publicName: "trailingAction", isSignal: true, isRequired: false, transformFunction: null }, trailingActionLabel: { classPropertyName: "trailingActionLabel", publicName: "trailingActionLabel", isSignal: true, isRequired: false, transformFunction: null }, trailingActionPressed: { classPropertyName: "trailingActionPressed", publicName: "trailingActionPressed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { trailingActionClick: "trailingActionClick" }, host: { classAttribute: "block" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SdsInput),
@@ -374,14 +423,17 @@ class SdsInput {
     }
 
     <div
-      class="relative flex items-center rounded-control border transition-colors"
+      class="relative flex items-center border transition-colors"
       [class]="wrapperClasses()"
     >
       @if (leadingIcon()) {
+        <!-- A pill needs its icon further in: on a fully-rounded field an icon at left-3 sits over
+             the curve rather than inside the field. -->
         <sds-icon
           [name]="leadingIcon()!"
           [size]="18"
-          class="pointer-events-none absolute left-3 opacity-70"
+          class="pointer-events-none absolute opacity-70"
+          [class]="pill() ? 'left-4' : 'left-3'"
         />
       }
 
@@ -394,7 +446,9 @@ class SdsInput {
         [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
         [attr.aria-invalid]="error() ? 'true' : null"
         [attr.aria-describedby]="describedBy()"
-        class="w-full bg-transparent outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+        class="w-full bg-transparent outline-none placeholder:text-current/50 disabled:cursor-not-allowed
+               [&::-webkit-search-cancel-button]:appearance-none
+               [&::-webkit-search-decoration]:appearance-none"
         [class]="fieldPadding()"
         (input)="onInput($event)"
         (blur)="onTouched()"
@@ -404,7 +458,7 @@ class SdsInput {
         <button
           type="button"
           tabindex="-1"
-          aria-label="Effacer"
+          [attr.aria-label]="clearLabel()"
           class="absolute right-2.5 inline-flex h-6 w-6 items-center justify-center rounded-full opacity-60 hover:opacity-100 hover:bg-black/5"
           (click)="clear()"
         >
@@ -444,23 +498,17 @@ class SdsInput {
         {{ hint() }}
       </p>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 100000s ease-in-out 0s;-webkit-text-fill-color:currentColor;caret-color:currentColor}\n"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsInput, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'sds-input',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [SdsIcon],
-                    providers: [
+            args: [{ selector: 'sds-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdsIcon], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SdsInput),
                             multi: true,
                         },
-                    ],
-                    host: { class: 'block' },
-                    template: `
+                    ], host: { class: 'block' }, template: `
     @if (label()) {
       <label
         [for]="inputId"
@@ -472,14 +520,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
 
     <div
-      class="relative flex items-center rounded-control border transition-colors"
+      class="relative flex items-center border transition-colors"
       [class]="wrapperClasses()"
     >
       @if (leadingIcon()) {
+        <!-- A pill needs its icon further in: on a fully-rounded field an icon at left-3 sits over
+             the curve rather than inside the field. -->
         <sds-icon
           [name]="leadingIcon()!"
           [size]="18"
-          class="pointer-events-none absolute left-3 opacity-70"
+          class="pointer-events-none absolute opacity-70"
+          [class]="pill() ? 'left-4' : 'left-3'"
         />
       }
 
@@ -492,7 +543,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
         [attr.aria-invalid]="error() ? 'true' : null"
         [attr.aria-describedby]="describedBy()"
-        class="w-full bg-transparent outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+        class="w-full bg-transparent outline-none placeholder:text-current/50 disabled:cursor-not-allowed
+               [&::-webkit-search-cancel-button]:appearance-none
+               [&::-webkit-search-decoration]:appearance-none"
         [class]="fieldPadding()"
         (input)="onInput($event)"
         (blur)="onTouched()"
@@ -502,7 +555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         <button
           type="button"
           tabindex="-1"
-          aria-label="Effacer"
+          [attr.aria-label]="clearLabel()"
           class="absolute right-2.5 inline-flex h-6 w-6 items-center justify-center rounded-full opacity-60 hover:opacity-100 hover:bg-black/5"
           (click)="clear()"
         >
@@ -542,9 +595,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         {{ hint() }}
       </p>
     }
-  `,
-                }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], trailingAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingAction", required: false }] }], trailingActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionLabel", required: false }] }], trailingActionPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionPressed", required: false }] }], trailingActionClick: [{ type: i0.Output, args: ["trailingActionClick"] }] } });
+  `, styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 100000s ease-in-out 0s;-webkit-text-fill-color:currentColor;caret-color:currentColor}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], trailingAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingAction", required: false }] }], trailingActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionLabel", required: false }] }], trailingActionPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionPressed", required: false }] }], trailingActionClick: [{ type: i0.Output, args: ["trailingActionClick"] }] } });
 
 let nextId$9 = 0;
 const SIZES$7 = {
@@ -6632,9 +6684,19 @@ class SdsTopbar {
           </button>
         }
         <ng-content select="[sdsLogo]" />
+        <!--
+          shrink-0 + whitespace-nowrap, both required. The left block is a flex row, so without them a
+          two-word app name wraps to a second line INSIDE a bar whose height is fixed at
+          --sds-topbar-h, and the name is clipped by its own bar. It surfaced at 375px on a bar
+          carrying a logo, a wordmark and a two-syllable name; it is wrong at every width.
+
+          The name never truncates and never hides: it is the answer to "which app am I in", which on a
+          platform of five same-branded apps is the one thing the bar must not drop. An app whose left
+          block is too crowded for a phone hides ITS OWN wordmark under sm and keeps the mark.
+        -->
         @if (appName()) {
-          <span class="h-7 w-px" [class]="appearance() === 'brand' ? 'bg-white/30' : 'bg-border'"></span>
-          <span class="text-xl font-bold tracking-tight">{{ appName() }}</span>
+          <span class="h-7 w-px shrink-0" [class]="appearance() === 'brand' ? 'bg-white/30' : 'bg-border'"></span>
+          <span class="shrink-0 whitespace-nowrap text-xl font-bold tracking-tight">{{ appName() }}</span>
         }
         <ng-content select="[sdsLead]" />
       </div>
@@ -6721,9 +6783,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           </button>
         }
         <ng-content select="[sdsLogo]" />
+        <!--
+          shrink-0 + whitespace-nowrap, both required. The left block is a flex row, so without them a
+          two-word app name wraps to a second line INSIDE a bar whose height is fixed at
+          --sds-topbar-h, and the name is clipped by its own bar. It surfaced at 375px on a bar
+          carrying a logo, a wordmark and a two-syllable name; it is wrong at every width.
+
+          The name never truncates and never hides: it is the answer to "which app am I in", which on a
+          platform of five same-branded apps is the one thing the bar must not drop. An app whose left
+          block is too crowded for a phone hides ITS OWN wordmark under sm and keeps the mark.
+        -->
         @if (appName()) {
-          <span class="h-7 w-px" [class]="appearance() === 'brand' ? 'bg-white/30' : 'bg-border'"></span>
-          <span class="text-xl font-bold tracking-tight">{{ appName() }}</span>
+          <span class="h-7 w-px shrink-0" [class]="appearance() === 'brand' ? 'bg-white/30' : 'bg-border'"></span>
+          <span class="shrink-0 whitespace-nowrap text-xl font-bold tracking-tight">{{ appName() }}</span>
         }
         <ng-content select="[sdsLead]" />
       </div>