@lifecorner/angular-ui-kit 3.3.1 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifecorner/angular-ui-kit",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "description": "LifeCorner Design System – Angular UI component library",
   "license": "MIT",
   "repository": {

package/types/lifecorner-angular-ui-kit.d.ts

@@ -4085,6 +4085,14 @@ export declare class EmailInputComponent implements ControlValueAccessor {
 export type HeroColor = 'primary' | 'secondary' | 'neutral' | 'success' | 'info' | 'warning' | 'accent-orange' | 'accent-purple' | 'accent-violet';
 export type HeroSize = 'sm' | 'md' | 'lg';
 export type HeroVariant = 'default' | 'slim' | 'light';
+/**
+ * Width of the hero's content box.
+ * - `full`: the content runs to the hero's own padding (default, as before 3.4)
+ * - `lg`: from 1024 px the content sits on the `lc-container` `lg` page column
+ *   (1024 px minus its 48 px sides, so at most 928 px), centred, while the
+ *   background stays full-bleed
+ */
+export type HeroContentWidth = 'full' | 'lg';
 /**
  * Hero component for prominent page headers with gradient backgrounds.
  *
@@ -4096,6 +4104,9 @@ export type HeroVariant = 'default' | 'slim' | 'light';
  * - Configurable border radius
  * - Content projection for body and footer sections
  * - Footer slot for metadata, stats, or CTAs
+ * - Media slot (`[hero-media]`) for a visual: below the text on small screens,
+ *   beside it from 1024 px, never under the body's 85 % opacity
+ * - Content width `lg`: a full-bleed band whose text lines up with the page column
  *
  * @example
  * ```html
@@ -4103,6 +4114,11 @@ export type HeroVariant = 'default' | 'slim' | 'light';
  *   <p>Description text</p>
  *   <div hero-footer>Status: Active</div>
  * </lc-hero>
+ *
+ * <lc-hero title="Everything in view" borderRadius="none" contentWidth="lg">
+ *   <p>Description text</p>
+ *   <lc-card hero-media variant="elevated">…</lc-card>
+ * </lc-hero>
  * ```
  */
 export declare class HeroComponent {
@@ -4137,6 +4153,15 @@ export declare class HeroComponent {
    * @default 'default'
    */
   variant: import("@angular/core").InputSignal<HeroVariant>;
+  /**
+   * Width of the content box. `lg` keeps the background full-bleed and, from
+   * 1024 px, puts the label, title, body, media and footer on the 1024 px page
+   * column (the `lc-container` `lg` content box), never closer to the edge than
+   * the size padding. Use it for a full-width band (`borderRadius="none"`) whose
+   * text should line up with the page content below.
+   * @default 'full'
+   */
+  contentWidth: import("@angular/core").InputSignal<HeroContentWidth>;
   protected heroClasses: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<HeroComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<HeroComponent, "lc-hero", never, {
@@ -4170,7 +4195,12 @@ export declare class HeroComponent {
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*", "[hero-footer]"], true, never>;
+    "contentWidth": {
+      "alias": "contentWidth";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*", "[hero-media]", "[hero-footer]"], true, never>;
 }
 export type ProgressBarColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
 export type ProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';