@area8975/ui 0.1.1-dev.13 → 0.1.1-dev.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@area8975/ui",
-  "version": "0.1.1-dev.13",
+  "version": "0.1.1-dev.15",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",

package/theme.css

@@ -140,6 +140,11 @@
     --background: var(--color-neutral-900);
     --sidebar: var(--card);
     --sidebar-line: var(--card-line);
+
+    /* menus sit on cards, Preline's item hover is the card's own colour so it never showed */
+    --dropdown-item-hover: var(--color-neutral-700);
+    --dropdown-item-focus: var(--color-neutral-700);
+    --dropdown-item-active: var(--color-neutral-700);
 }
 
 /*

package/types/area8975-ui.d.ts

@@ -2315,6 +2315,8 @@ export declare class UiSegmentedComponent<T> {
   readonly value: import("@angular/core").ModelSignal<T>;
   /** What the options choose between, e.g. "How far back the charts go". */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Stretches to the container's width with the options sharing it evenly. */
+  readonly fill: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   protected readonly name: string;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiSegmentedComponent<any>, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiSegmentedComponent<any>, "ui-segmented", never, {
@@ -2333,6 +2335,11 @@ export declare class UiSegmentedComponent<T> {
       "required": true;
       "isSignal": true;
     };
+    "fill": {
+      "alias": "fill";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "value": "valueChange";
   }, never, never, true, never>;
@@ -2936,6 +2943,25 @@ export declare class UiSidebarComponent {
     "isOpen": "isOpenChange";
   }, never, ["*", "[sidebar-footer]"], true, never>;
 }
+/**
+ * A labelled section of sidebar items. The label shows while the sidebar is
+ * open and turns into a divider when it's collapsed, screen readers get the
+ * name either way.
+ */
+export declare class UiSidebarGroupComponent {
+  private readonly sidebar;
+  readonly label: import("@angular/core").InputSignal<string>;
+  protected readonly labelId: string;
+  readonly isCollapsed: import("@angular/core").Signal<boolean>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiSidebarGroupComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiSidebarGroupComponent, "ui-sidebar-group", never, {
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
 export declare class UiSidebarItemComponent {
   private readonly sidebar;
   readonly label: import("@angular/core").InputSignal<string>;
@@ -3465,6 +3491,56 @@ export declare class UiTimeSelectComponent {
     "value": "valueChange";
   }, never, never, true, never>;
 }
+/**
+ * The signed in person and their options, e.g. Settings and Log out, with a
+ * theme switch. Goes inside a dropdown's `uiDropdownContent`, the same as
+ * `ui-dropdown-menu`. Give that dropdown `closeBehaviour="whenClickOutside"`
+ * so picking a theme doesn't close it, picking an item still does.
+ */
+export declare class UiUserMenuComponent {
+  private readonly dropdown;
+  readonly name: import("@angular/core").InputSignal<string>;
+  /** A second line under the name, e.g. an email address. */
+  readonly detail: import("@angular/core").InputSignal<string>;
+  readonly src: import("@angular/core").InputSignal<string | null>;
+  /** The same items as `ui-dropdown-menu`, buttons, labelled groups and dividers. */
+  readonly items: import("@angular/core").InputSignal<DropdownMenuItem[]>;
+  /** Shows the System, Light and Dark switch, which needs `provideUiTheme()`. */
+  readonly themeSwitch: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  protected readonly menuItems: import("@angular/core").Signal<DropdownMenuItem[]>;
+  protected isDivider(item: DropdownMenuItem): boolean;
+  protected group(item: DropdownMenuItem): DropdownMenuCategory | null;
+  protected button(item: DropdownMenuItem): DropdownMenuButton | null;
+  private closing;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiUserMenuComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiUserMenuComponent, "ui-user-menu", never, {
+    "name": {
+      "alias": "name";
+      "required": true;
+      "isSignal": true;
+    };
+    "detail": {
+      "alias": "detail";
+      "required": false;
+      "isSignal": true;
+    };
+    "src": {
+      "alias": "src";
+      "required": false;
+      "isSignal": true;
+    };
+    "items": {
+      "alias": "items";
+      "required": false;
+      "isSignal": true;
+    };
+    "themeSwitch": {
+      "alias": "themeSwitch";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
 /** What the user picked, `system` follows the OS setting. */
 export type UiThemePreference = 'system' | 'light' | 'dark';
 export interface UiThemeConfig {
@@ -3504,4 +3580,29 @@ export declare class UiThemeService {
   static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 /** Starts theme switching at boot. Read or change it through `UiThemeService`. */
-export declare function provideUiTheme(config?: Partial<UiThemeConfig>): EnvironmentProviders;
+export declare function provideUiTheme(config?: Partial<UiThemeConfig>): EnvironmentProviders;
+/**
+ * Picks System, Light or Dark through UiThemeService, so the choice is stored
+ * and applied straight away. Add `provideUiTheme()` so the stored choice is
+ * applied at boot, not only once this has rendered.
+ */
+export declare class UiThemeSwitchComponent {
+  protected readonly theme: UiThemeService;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Stretches to the container's width, see `ui-segmented`. */
+  readonly fill: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  protected readonly options: SegmentedOption<UiThemePreference>[];
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiThemeSwitchComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiThemeSwitchComponent, "ui-theme-switch", never, {
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "fill": {
+      "alias": "fill";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}