@area8975/ui 0.2.2-dev.33 → 0.2.2-dev.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@area8975/ui",
-  "version": "0.2.2-dev.33",
+  "version": "0.2.2-dev.35",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",

package/types/area8975-ui.d.ts

@@ -1002,12 +1002,12 @@ export declare class UiFieldComponent {
 export declare class UiInputComponent<ValueType = string> {
   readonly value: import("@angular/core").ModelSignal<ValueType>;
   readonly classes: import("@angular/core").InputSignal<string>;
-  readonly type: import("@angular/core").InputSignal<"number" | "color" | "text" | "search" | "time" | "email" | "tel" | "url" | "password" | "date" | "datetime-local" | "month" | "week">;
+  readonly type: import("@angular/core").InputSignal<"number" | "search" | "time" | "color" | "text" | "email" | "tel" | "url" | "password" | "date" | "datetime-local" | "month" | "week">;
   readonly id: import("@angular/core").InputSignal<string>;
   readonly name: import("@angular/core").InputSignal<string>;
   readonly placeholder: import("@angular/core").InputSignal<string>;
   readonly autocomplete: import("@angular/core").InputSignal<string>;
-  readonly inputmode: import("@angular/core").InputSignal<"" | "decimal" | "none" | "text" | "search" | "numeric" | "email" | "tel" | "url">;
+  readonly inputmode: import("@angular/core").InputSignal<"" | "decimal" | "none" | "search" | "text" | "numeric" | "email" | "tel" | "url">;
   readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
@@ -1038,7 +1038,7 @@ export declare class UiInputComponent<ValueType = string> {
   readonly trailingElement: import("@angular/core").Signal<TemplateRef<unknown> | undefined>;
   protected readonly revealed: import("@angular/core").WritableSignal<boolean>;
   protected readonly canReveal: import("@angular/core").Signal<boolean>;
-  protected readonly shownType: import("@angular/core").Signal<"number" | "color" | "text" | "search" | "time" | "email" | "tel" | "url" | "password" | "date" | "datetime-local" | "month" | "week">;
+  protected readonly shownType: import("@angular/core").Signal<"number" | "search" | "time" | "color" | "text" | "email" | "tel" | "url" | "password" | "date" | "datetime-local" | "month" | "week">;
   readonly generatedClasses: import("@angular/core").Signal<string>;
   protected handleInput(event: Event): void;
   protected handleFocus(event: FocusEvent): void;
@@ -1789,7 +1789,7 @@ export type BadgeSize = typeof BadgeSizes[number];
  * A general-purpose button.
  */
 export declare class UiButtonComponent {
-  readonly appearance: import("@angular/core").InputSignal<"none" | "solid" | "link" | "outline" | "ghost" | "white">;
+  readonly appearance: import("@angular/core").InputSignal<"none" | "link" | "solid" | "outline" | "ghost" | "white">;
   readonly intent: import("@angular/core").InputSignal<"none" | "primary" | "secondary" | "success" | "warning" | "danger">;
   readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
   readonly classes: import("@angular/core").InputSignal<string>;
@@ -1802,6 +1802,9 @@ export declare class UiButtonComponent {
    * `disabled` is set explicitly, or implicitly while `loading` is true.
    */
   readonly isDisabled: import("@angular/core").Signal<boolean>;
+  private readonly group;
+  /** In a segmented group the button matches a `ui-segmented` option instead of its own variant. */
+  private readonly segmented;
   readonly generatedClasses: import("@angular/core").Signal<string>;
   private readonly intentAndAppearanceClasses;
   private readonly sizeClasses;
@@ -1874,6 +1877,8 @@ export type ButtonSize = typeof ButtonSizes[number];
 /** @see {@link ButtonTypes} */
 export type ButtonType = typeof ButtonTypes[number];
 /**
+ * Buttons that belong together, joined edge to edge or in a segmented track.
+ *
  * @example
  * ```html
  * <ui-button-group>
@@ -1884,10 +1889,29 @@ export type ButtonType = typeof ButtonTypes[number];
  * ```
  */
 export declare class UiButtonGroupComponent {
+  /** `segmented` matches `ui-segmented`, so the two can sit side by side. Buttons inside ignore their own appearance, intent and size. */
+  readonly appearance: import("@angular/core").InputSignal<"attached" | "segmented">;
   readonly buttons: import("@angular/core").Signal<readonly UiButtonComponent[]>;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiButtonGroupComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<UiButtonGroupComponent, "ui-button-group", never, {}, {}, ["buttons"], ["*"], true, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiButtonGroupComponent, "ui-button-group", never, {
+    "appearance": {
+      "alias": "appearance";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, ["buttons"], ["*"], true, never>;
 }
+/**
+ * How the buttons in a group are drawn. `"attached"` joins them edge to edge,
+ * `"segmented"` sits them in a track that matches `ui-segmented`.
+ */
+export declare const ButtonGroupAppearances: readonly ["attached", "segmented"];
+/** @see {@link ButtonGroupAppearances} */
+export type ButtonGroupAppearance = typeof ButtonGroupAppearances[number];
+/** Lets a button take its look from the group it's in. */
+export declare const UI_BUTTON_GROUP: InjectionToken<{
+  appearance: Signal<ButtonGroupAppearance>;
+}>;
 /** Which day each calendar row starts on. 0 is Sunday, 1 is Monday. */
 export declare const WeekStarts: readonly [0, 1];
 /** @see {@link WeekStarts} */
@@ -2131,7 +2155,7 @@ export declare class UiKpiComponent {
   readonly value: import("@angular/core").InputSignal<string>;
   readonly hint: import("@angular/core").InputSignal<string>;
   readonly icon: import("@angular/core").InputSignal<keyof import("@ng-icons/core").NgIconNameMap | undefined>;
-  readonly iconPosition: import("@angular/core").InputSignal<"right" | "left">;
+  readonly iconPosition: import("@angular/core").InputSignal<"left" | "right">;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiKpiComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiKpiComponent, "ui-kpi", never, {
     "label": {
@@ -2381,7 +2405,7 @@ export declare class UiProgressComponent {
   readonly shape: import("@angular/core").InputSignal<"square" | "straight" | "rounded">;
   readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
   readonly title: import("@angular/core").InputSignal<string>;
-  readonly labelPosition: import("@angular/core").InputSignal<"none" | "top" | "end" | "floating" | "inside">;
+  readonly labelPosition: import("@angular/core").InputSignal<"none" | "end" | "top" | "floating" | "inside">;
   readonly labelWith: import("@angular/core").InputSignal<(value: number, max: number) => string>;
   /** Splits the bar into this many blocks. */
   readonly steps: import("@angular/core").InputSignal<number | null>;
@@ -3479,7 +3503,7 @@ export declare class UiDatepickerComponent {
 }
 export declare class UiDropdownButtonComponent {
   readonly intent: import("@angular/core").InputSignal<"none" | "primary" | "secondary" | "success" | "warning" | "danger">;
-  readonly appearance: import("@angular/core").InputSignal<"none" | "solid" | "link" | "outline" | "ghost" | "white">;
+  readonly appearance: import("@angular/core").InputSignal<"none" | "link" | "solid" | "outline" | "ghost" | "white">;
   readonly icon: import("@angular/core").InputSignal<string>;
   readonly isOpen: import("@angular/core").ModelSignal<boolean>;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiDropdownButtonComponent, never>;