otimus-library 0.5.6 → 0.5.7

package/index.d.ts

@@ -39,10 +39,11 @@ declare class OcToastService {
     static ɵprov: i0.ɵɵInjectableDeclaration<OcToastService>;
 }
 
-type OcStyleThemeType = 'otimus' | 'shui' | 'semantic';
+type OcStyleThemeType = 'otimus' | 'otimus-dark' | 'asl' | 'asl-dark' | 'shui' | 'shui-dark' | 'semantic';
 
 declare class StyleThemeService {
     constructor();
+    private static readonly KNOWN_THEMES;
     getStyleTheme(): OcStyleThemeType | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<StyleThemeService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<StyleThemeService>;
@@ -249,6 +250,7 @@ declare class OcAutocompleteComponent implements AfterViewInit, OnChanges, OnIni
     private styleThemeService;
     private cdr;
     private overlay;
+    private readonly viewportRuler;
     constructor(renderer: Renderer2, el: ElementRef, translateService: InternationalizationService, styleThemeService: StyleThemeService, cdr: ChangeDetectorRef, overlay: Overlay);
     input: ElementRef;
     options: ElementRef;
@@ -343,6 +345,17 @@ declare class OcAutocompleteComponent implements AfterViewInit, OnChanges, OnIni
     private updateOverlayPosition;
     private updateOverlayWidth;
     updateOverlay(): void;
+    /**
+     * Keeps the open overlay coherent with its anchor input when the viewport
+     * changes (window resize / browser zoom / orientation change). While the
+     * input is still visible we re-anchor the overlay to it; once the input is
+     * pushed out of the viewport (e.g. host horizontal overflow) we close the
+     * overlay so it does not linger orphaned in a corner — the user can reopen it
+     * in a consistent position. (#12918)
+     */
+    private handleViewportChange;
+    /** True when the anchor input is at least partially inside the viewport. */
+    private isInputWithinViewport;
     private closeOverlay;
     private updateDropdownPortal;
     private setDropdownComponentInputs;
@@ -688,7 +701,7 @@ declare class OcDropdownDirective implements OnInit {
     readonly ocDropdownMenu: i0.InputSignal<OcDropdownMenuContentComponent | undefined>;
     readonly ocTrigger: i0.InputSignal<"click" | "hover">;
     readonly ocDisabled: i0.InputSignal<boolean>;
-    readonly ocAlign: i0.InputSignal<"end" | "start">;
+    readonly ocAlign: i0.InputSignal<"start" | "end">;
     ngOnInit(): void;
     protected onClick(event: MouseEvent): void;
     protected onKeydown(event: KeyboardEvent): void;
@@ -926,6 +939,7 @@ declare class OcModalFooterComponent {
     ocSide: 'left' | 'right';
     ocBgColor?: string;
     ocFixed: boolean;
+    protected get resolvedBgColor(): string | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<OcModalFooterComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<OcModalFooterComponent, "oc-modal-footer", never, { "ocSide": { "alias": "ocSide"; "required": false; }; "ocBgColor": { "alias": "ocBgColor"; "required": false; }; "ocFixed": { "alias": "ocFixed"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
@@ -938,7 +952,7 @@ declare class OcModalComponent implements AfterViewInit, OnDestroy {
     private closeTimeout;
     readonly ocClose: i0.InputSignal<boolean>;
     ocTitle: string;
-    readonly ocSize: i0.InputSignal<"small" | "medium" | "large" | "screen">;
+    readonly ocSize: i0.InputSignal<"small" | "large" | "medium" | "screen">;
     readonly ocBgColor: i0.InputSignal<string | undefined>;
     readonly ocWidth: i0.InputSignal<string>;
     readonly ocMaxWidth: i0.InputSignal<string>;
@@ -969,7 +983,7 @@ declare class OcNotFoundComponent {
 
 declare class OcOtpComponent implements AfterViewInit, OnDestroy {
     private readonly cdr;
-    readonly ocLength: i0.InputSignal<8 | 6>;
+    readonly ocLength: i0.InputSignal<6 | 8>;
     readonly ocSeparator: i0.InputSignal<boolean>;
     readonly ocError: i0.InputSignal<string | null | undefined>;
     readonly ocDisabled: i0.InputSignal<boolean>;
@@ -985,7 +999,7 @@ declare class OcOtpComponent implements AfterViewInit, OnDestroy {
     constructor(cdr: ChangeDetectorRef);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    protected readonly inputMode: i0.Signal<"numeric" | "text">;
+    protected readonly inputMode: i0.Signal<"text" | "numeric">;
     protected onInput(idx: number, event: Event): void;
     protected onKey(idx: number, event: KeyboardEvent): void;
     protected onPaste(event: ClipboardEvent): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "otimus-library",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "license": "MIT",
   "peerDependencies": {
     "@angular/cdk": "^20.2.5",

package/styles/components/inputs/inputs.scss

@@ -93,6 +93,19 @@
     }
   }
 
+  // Browser autofill paints its own (often bluish) background — jarring on dark
+  // themes and under `color-scheme: dark`. Repaint it with the themed input
+  // surface/text via an inset box-shadow (the only way to override -webkit-autofill).
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 100px variables.$color-gray-6 inset;
+    -webkit-text-fill-color: variables.$color-gray-2;
+    caret-color: variables.$color-gray-2;
+    transition: background-color 9999s ease-in-out 0s;
+  }
+
   input:not(:placeholder-shown) ~ label,
   input:-webkit-autofill ~ label,
   input:autofill ~ label,

package/styles/components/inputs/inputs.shui.scss

@@ -87,6 +87,29 @@
     min-width: 100%;
   }
 
+  // Shui inputs are borderless and use the orange `::before` underline as the
+  // focus affordance. Without an explicit focus override the base input's
+  // `:focus { border: brand-g-1 }` (green + green glow) bleeds through at the
+  // edges/corners the underline doesn't cover. Suppress it here.
+  input:focus,
+  textarea:focus,
+  select:focus {
+    border: none;
+    box-shadow: none;
+  }
+
+  // Repaint browser autofill with the shui input surface/text (see inputs.scss).
+  // Under shui-dark this follows the dark base-2 (#161616) and light ui-1 text.
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 100px variables.$color-shui-base-2 inset;
+    -webkit-text-fill-color: variables.$color-shui-ui-1;
+    caret-color: variables.$color-shui-ui-1;
+    transition: background-color 9999s ease-in-out 0s;
+  }
+
   textarea {
     height: inherit;
     padding-top: 20px;

package/styles/components/table/table.scss

@@ -13,14 +13,14 @@
   font-size: 0.95rem;
   font-family: inherit;
   color: variables.$color-text-1;
-  background-color: #ffffff;
+  background-color: variables.$color-surface-1;
   border-radius: 12px;
   overflow: hidden;
-  box-shadow: 0 1px 3px rgba(variables.$color-brand-dp-1, 0.06);
+  box-shadow: 0 1px 3px color-mix(in srgb, variables.$color-brand-dp-1 6%, transparent);
   border: 1px solid variables.$color-gray-5;
 
   tr {
-    background-color: #ffffff;
+    background-color: variables.$color-surface-1;
     transition:
       background-color 0.15s ease,
       opacity 0.15s ease;
@@ -70,7 +70,7 @@
 // ----------------------------------------------------------------------------
 
 .oc.table tbody tr:hover {
-  background-color: rgba(variables.$color-brand-p-1, 0.04);
+  background-color: color-mix(in srgb, variables.$color-brand-p-1 4%, transparent);
 }
 
 // ----------------------------------------------------------------------------
@@ -79,7 +79,7 @@
 
 // Striped (zebra)
 .oc.table.striped tbody tr:nth-child(even) {
-  background-color: rgba(variables.$color-gray-6, 0.6);
+  background-color: color-mix(in srgb, variables.$color-gray-6 60%, transparent);
 }
 
 // Bordered — vertical dividers between columns
@@ -122,7 +122,7 @@
 
 .oc.table tr.oc-table-row-detail {
   display: none;
-  background-color: rgba(variables.$color-brand-p-1, 0.03);
+  background-color: color-mix(in srgb, variables.$color-brand-p-1 3%, transparent);
 
   &.expanded {
     display: table-row;
@@ -171,7 +171,7 @@
 
     // Scrollbar styling appears only when the table actually scrolls.
     scrollbar-width: thin;
-    scrollbar-color: rgba(variables.$color-brand-p-1, 0.25) transparent;
+    scrollbar-color: color-mix(in srgb, variables.$color-brand-p-1 25%, transparent) transparent;
 
     &::-webkit-scrollbar {
       height: 8px;
@@ -180,11 +180,11 @@
       background: transparent;
     }
     &::-webkit-scrollbar-thumb {
-      background: rgba(variables.$color-brand-p-1, 0.2);
+      background: color-mix(in srgb, variables.$color-brand-p-1 20%, transparent);
       border-radius: 4px;
     }
     &::-webkit-scrollbar-thumb:hover {
-      background: rgba(variables.$color-brand-p-1, 0.4);
+      background: color-mix(in srgb, variables.$color-brand-p-1 40%, transparent);
     }
   }
 

package/styles/components/table/table.shui.scss

@@ -14,14 +14,14 @@
   }
 
   tr {
-    background-color: white;
+    background-color: variables.$color-surface-1;
     transition: 0.1s ease;
     border: none;
     border-top: 0;
     border-bottom: 0;
 
     &:hover {
-      background-color: rgba(#f5f5f5, 0.3) !important;
+      background-color: color-mix(in srgb, variables.$color-gray-6 50%, transparent) !important;
     }
   }
 
@@ -33,18 +33,18 @@
 
   th {
     background-color: transparent;
-    border-bottom: 1px solid rgba(variables.$color-shui-ui-5, 0.75);
+    border-bottom: 1px solid color-mix(in srgb, variables.$color-shui-ui-5 75%, transparent);
     color: variables.$color-shui-ui-1;
     font-weight: 600;
     padding: 12px 15px;
   }
 
   td {
-    border-bottom: 1px solid rgba(variables.$color-shui-ui-6, 0.5);
+    border-bottom: 1px solid color-mix(in srgb, variables.$color-shui-ui-6 50%, transparent);
     font-size: 0.9rem;
   }
 
   &.striped tr:nth-child(even) {
-    background-color: white;
+    background-color: variables.$color-surface-1;
   }
 }

package/styles/patterns/shui/colors.shui.scss

@@ -137,19 +137,22 @@
   }
 
   &.text, .oc.color.text {
+    // Typography colors derive from the UI text color (ui-1), per the Shui guide
+    // — NOT the teal accent (ui-0). Opacity provides the primary/secondary/
+    // disabled hierarchy on top of whichever base ui-1 the variant resolves to.
     &.text-primary {
-      color: variables.$color-shui-ui-0;
+      color: variables.$color-shui-ui-1;
       opacity: 90%;
     }
-    
+
     &.text-secondary {
-      color: variables.$color-shui-ui-0;
+      color: variables.$color-shui-ui-1;
       opacity: 60%;
     }
-  
+
     &.text-disabled {
-      color: variables.$color-shui-ui-0;
-      opacity: 60%;
+      color: variables.$color-shui-ui-1;
+      opacity: 30%;
     }
   }
 }

package/styles/patterns/shui/variables.shui.scss

@@ -1,23 +1,31 @@
+// Siemens (shui) palette — ACC-2362
+// Runtime CSS custom properties live in `tokens.scss` under `.shui` (light) and
+// `.shui-dark` (dark). These SCSS names are ALIASES so the existing shui-scoped
+// component rules keep compiling and now switch light/dark by class.
+// A light-value fallback is provided because these tokens are only *declared*
+// inside a `.shui` ancestor; the fallback guards any accidental use outside it.
+// Do NOT pass these into Sass color functions — they hold `var(...)`.
+
 // Light base
-$color-shui-base-0: #ffffff;
-$color-shui-base-1: #ebebeb;
-$color-shui-base-2: #f5f5f5;
+$color-shui-base-0: var(--oc-color-shui-base-0, #ffffff);
+$color-shui-base-1: var(--oc-color-shui-base-1, #ebebeb);
+$color-shui-base-2: var(--oc-color-shui-base-2, #f5f5f5);
 
-$color-shui-ui-0: #009999;
-$color-shui-ui-1: #000000;
-$color-shui-ui-2: #ec6602;
-$color-shui-ui-3: #cf4b00;
-$color-shui-ui-4: #d85808;
-$color-shui-ui-5: #7d7d7d;
-$color-shui-ui-6: #c8c8c8;
-$color-shui-ui-7: #ffffff;
+$color-shui-ui-0: var(--oc-color-shui-ui-0, #009999);
+$color-shui-ui-1: var(--oc-color-shui-ui-1, #000000);
+$color-shui-ui-2: var(--oc-color-shui-ui-2, #ec6602);
+$color-shui-ui-3: var(--oc-color-shui-ui-3, #cf4b00);
+$color-shui-ui-4: var(--oc-color-shui-ui-4, #d85808);
+$color-shui-ui-5: var(--oc-color-shui-ui-5, #7d7d7d);
+$color-shui-ui-6: var(--oc-color-shui-ui-6, #c8c8c8);
+$color-shui-ui-7: var(--oc-color-shui-ui-7, #ffffff);
 
-$color-shui-ui-8: #0169b2;
+$color-shui-ui-8: var(--oc-color-shui-ui-8, #0169b2);
 
 // Functional color
-$color-shui-functional-green: #009a38;
-$color-shui-functional-yellow: #ffd200;
-$color-shui-functional-red: #e7001d;
+$color-shui-functional-green: var(--oc-color-shui-functional-green, #009a38);
+$color-shui-functional-yellow: var(--oc-color-shui-functional-yellow, #ffd200);
+$color-shui-functional-red: var(--oc-color-shui-functional-red, #e7001d);
 
 // BW Colors
-$color-shui-black: #000000;
+$color-shui-black: var(--oc-color-shui-black, #000000);

package/styles/styles.scss

@@ -1,3 +1,4 @@
+@use './tokens.scss';
 @use './components/index.scss' as components;
 @use './grid.scss';
 @use './colors.scss';
@@ -21,26 +22,26 @@
   height: 0px;
 }
 ::-webkit-scrollbar-thumb {
-  background: #5505a2;
+  background: var(--oc-color-brand-p-1);
   border: 0px none #ffffff;
   border-radius: 52px;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: #5505a2;
+  background: var(--oc-color-brand-p-1);
 }
 ::-webkit-scrollbar-thumb:active {
-  background: #5505a2;
+  background: var(--oc-color-brand-p-1);
 }
 ::-webkit-scrollbar-track {
-  background: #f8f9ff;
+  background: var(--oc-color-surface-2);
   border: 0px none #ffffff;
   border-radius: 50px;
 }
 ::-webkit-scrollbar-track:hover {
-  background: #d1d5db;
+  background: var(--oc-color-border-1);
 }
 ::-webkit-scrollbar-track:active {
-  background: #d1d5db;
+  background: var(--oc-color-border-1);
 }
 ::-webkit-scrollbar-corner {
   background: transparent;