@aurodesignsystem-dev/auro-background 0.0.0-pr60.2 → 0.0.0-pr67.0

package/dist/index.d.ts

@@ -1,10 +1,222 @@
-import { css, LitElement, html } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
 
-class n{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,i=(e,r=e&&e.closest(t))=>e&&e!==document&&e!==window?r||i(e.getRootNode().host):null){return i(e)}handleComponentTagRename(t,e){const i=e.toLowerCase();t.tagName.toLowerCase()!==i&&t.setAttribute(i,true);}elementMatch(t,e){const i=e.toLowerCase();return t.tagName.toLowerCase()===i||t.hasAttribute(i)}}var s=css`:focus:not(:focus-visible){outline:3px solid transparent}.background{width:auto;width:var(--width);height:inherit;height:var(--height);padding:var(--inset);background:var(--background)}@media screen and (min-width: 576px){.background{width:var(--widthSm);height:var(--heightSm);padding:var(--insetSm);background:var(--backgroundSm)}}@media screen and (min-width: 768px){.background{width:var(--widthMd);height:var(--heightMd);padding:var(--insetMd);background:var(--backgroundMd)}}@media screen and (min-width: 1024px){.background{width:var(--widthLg);height:var(--heightLg);padding:var(--insetMd);background:var(--backgroundLg)}}
-`,a=css`:host{--ds-auro-background-container-color: transparent}
-`;class g extends LitElement{constructor(){super(),this.runtimeUtils=new n;}static get properties(){return {bg:{type:String},bgSm:{type:String},bgMd:{type:String},bgLg:{type:String},height:{type:String},heightSm:{type:String},heightMd:{type:String},heightLg:{type:String},width:{type:String},widthSm:{type:String},widthMd:{type:String},widthLg:{type:String},inset:{type:String},insetSm:{type:String},insetMd:{type:String},insetLg:{type:String}}}static get styles(){return [s,a]}static register(t="auro-background"){n.prototype.registerComponent(t,g);}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-background");}getInsetValues(t){const e={none:"0",xxxs:"25",xxs:"50",xs:"100",sm:"150",md:"200",lg:"300",xl:"400",xxl:"600",xxxl:"800"};return e[t]?`var(--ds-size-${e[t]})`:t}render(){const t={"--background":this.bg||"var(--ds-auro-background-container-color)","--backgroundSm":this.bgSm||"var(--background)","--backgroundMd":this.bgMd||"var(--backgroundSm)","--backgroundLg":this.bgLg||"var(--backgroundMd)","--width":this.width||"auto","--widthSm":this.widthSm||"var(--width)","--widthMd":this.widthMd||"var(--widthSm)","--widthLg":this.widthLg||"var(--widthMd)","--height":this.height||"auto","--heightSm":this.heightSm||"var(--height)","--heightMd":this.heightMd||"var(--heightSm)","--heightLg":this.heightLg||"var(--heightMd)","--inset":this.getInsetValues(this.inset)||"0","--insetSm":this.getInsetValues(this.insetSm)||"var(--inset)","--insetMd":this.getInsetValues(this.insetMd)||"var(--insetSm)","--insetLg":this.getInsetValues(this.insetLg)||"var(--insetMd)"};return html`
-      <div class="background" style=${styleMap(t)}><slot></slot></div>
-    `}}
+import type { AuroBackground } from "src/auro-background.js";
 
-export { g as AuroBackground };
+/**
+ * This type can be used to create scoped tags for your components.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import type { ScopedElements } from "path/to/library/jsx-integration";
+ *
+ * declare module "my-library" {
+ *   namespace JSX {
+ *     interface IntrinsicElements
+ *       extends ScopedElements<'test-', ''> {}
+ *   }
+ * }
+ * ```
+ *
+ * @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
+ */
+export type ScopedElements<
+  Prefix extends string = "",
+  Suffix extends string = ""
+> = {
+  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
+};
+
+type BaseProps<T extends HTMLElement> = {
+
+  /** Content added between the opening and closing tags of the element */
+  children?: any;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  class?: string;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  className?: string;
+  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
+  classList?: Record<string, boolean | undefined>;
+  /** Specifies the text direction of the element. */
+  dir?: "ltr" | "rtl";
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+  /** For <label> and <output>, lets you associate the label with some control. */
+  htmlFor?: string;
+  /** Specifies whether the element should be hidden. */
+  hidden?: boolean | string;
+  /** A unique identifier for the element. */
+  id?: string;
+  /** Keys tell React which array item each component corresponds to */
+  key?: string | number;
+  /** Specifies the language of the element. */
+  lang?: string;
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
+  ref?: T | ((e: T) => void);
+  /** Adds a reference for a custom element slot */
+  slot?: string;
+  /** Prop for setting inline styles */
+  style?: Record<string, string | number>;
+  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
+  tabIndex?: number;
+  /** Specifies the tooltip text for the element. */
+  title?: string;
+  /** Passing 'no' excludes the element content from being translated. */
+  translate?: "yes" | "no";
+  /** The popover global attribute is used to designate an element as a popover element. */
+  popover?: "auto" | "hint" | "manual";
+  /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
+  popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
+  /** Specifies the action to be performed on a popover element being controlled by a control element. */
+  popovertargetaction?: "show" | "hide" | "toggle";
+
+} ;
+
+type BaseEvents = {
+
+
+};
+
+
+
+export type AuroBackgroundProps = {
+  /** Sets the background image at all breakpoints */
+  "bg"?: AuroBackground['bg'];
+  /** Sets the background image at `ds-grid-breakpoint-lg` and above */
+  "bgLg"?: AuroBackground['bgLg'];
+  /** Sets the background image at `ds-grid-breakpoint-md` and above */
+  "bgMd"?: AuroBackground['bgMd'];
+  /** Sets the background image at `ds-grid-breakpoint-sm` and above */
+  "bgSm"?: AuroBackground['bgSm'];
+  /** Applies custom height at all breakpoints */
+  "height"?: AuroBackground['height'];
+  /** Applies custom height at `ds-grid-breakpoint-lg` and above */
+  "heightLg"?: AuroBackground['heightLg'];
+  /** Applies custom height at `ds-grid-breakpoint-md` and above */
+  "heightMd"?: AuroBackground['heightMd'];
+  /** Applies custom height at `ds-grid-breakpoint-sm` and above */
+  "heightSm"?: AuroBackground['heightSm'];
+  /** Applies internal padding at all breakpoints */
+  "inset"?: AuroBackground['inset'];
+  /** Applies internal padding at `ds-grid-breakpoint-lg` and above */
+  "insetLg"?: AuroBackground['insetLg'];
+  /** Applies internal padding at `ds-grid-breakpoint-md` and above */
+  "insetMd"?: AuroBackground['insetMd'];
+  /** Applies internal padding at `ds-grid-breakpoint-sm` and above */
+  "insetSm"?: AuroBackground['insetSm'];
+  /** Applies custom width at all breakpoints */
+  "width"?: AuroBackground['width'];
+  /** Applies custom width at `ds-grid-breakpoint-lg` and above */
+  "widthLg"?: AuroBackground['widthLg'];
+  /** Applies custom width at `ds-grid-breakpoint-md` and above */
+  "widthMd"?: AuroBackground['widthMd'];
+  /** Applies custom width at `ds-grid-breakpoint-sm` and above */
+  "widthSm"?: AuroBackground['widthSm'];
+
+
+}
+
+  export type CustomElements = {
+
+
+  /**
+     * The `auro-background` element provides users a way to add a background image or color block including a gradient.
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `bg`: Sets the background image at all breakpoints 
+ * - `bgLg`: Sets the background image at `ds-grid-breakpoint-lg` and above 
+ * - `bgMd`: Sets the background image at `ds-grid-breakpoint-md` and above 
+ * - `bgSm`: Sets the background image at `ds-grid-breakpoint-sm` and above 
+ * - `height`: Applies custom height at all breakpoints 
+ * - `heightLg`: Applies custom height at `ds-grid-breakpoint-lg` and above 
+ * - `heightMd`: Applies custom height at `ds-grid-breakpoint-md` and above 
+ * - `heightSm`: Applies custom height at `ds-grid-breakpoint-sm` and above 
+ * - `inset`: Applies internal padding at all breakpoints 
+ * - `insetLg`: Applies internal padding at `ds-grid-breakpoint-lg` and above 
+ * - `insetMd`: Applies internal padding at `ds-grid-breakpoint-md` and above 
+ * - `insetSm`: Applies internal padding at `ds-grid-breakpoint-sm` and above 
+ * - `width`: Applies custom width at all breakpoints 
+ * - `widthLg`: Applies custom width at `ds-grid-breakpoint-lg` and above 
+ * - `widthMd`: Applies custom width at `ds-grid-breakpoint-md` and above 
+ * - `widthSm`: Applies custom width at `ds-grid-breakpoint-sm` and above 
+ * 
+ * ## Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: Default slot for content within the background container.
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `register(name?: string = "auro-background") => void`: This will register this element with the browser.
+  */
+    "auro-background": Partial<AuroBackgroundProps & BaseProps<AuroBackground> & BaseEvents>;
+  }
+
+export type CustomCssProperties = {
+
+}
+
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  
+}
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  
+}
+
+declare module '@builder.io/qwik' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  
+}
+
+declare module '@stencil/core' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  
+}
+
+declare module 'hono/jsx' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  
+}
+
+declare module 'react-native' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  
+}
+declare global {
+  namespace svelteHTML {
+    interface IntrinsicElements extends CustomElements {}
+  } 
+}
+
+
+export { AuroBackground } from "./index.js";

package/dist/index.js

@@ -1 +1 @@
-export{A as AuroBackground}from"./auro-background-Bq6XF4Pn.js";import"lit";import"lit/directives/style-map.js";
+export{A as AuroBackground}from"./auro-background-B1Q_3Y1A.js";import"lit";import"lit/directives/style-map.js";

package/dist/registered.js

@@ -1 +1 @@
-import{A as r}from"./auro-background-Bq6XF4Pn.js";import"lit";import"lit/directives/style-map.js";r.register();
+import{A as r}from"./auro-background-B1Q_3Y1A.js";import"lit";import"lit/directives/style-map.js";r.register();

package/package.json

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem-dev/auro-background",
-  "version": "0.0.0-pr60.2",
+  "version": "0.0.0-pr67.0",
   "description": "auro-background HTML custom element",
   "repository": {
     "type": "git",
@@ -18,17 +18,17 @@
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
   "engines": {
-    "node": "^20.x || ^22.x "
+    "node": ">=20"
   },
   "dependencies": {
-    "lit": "^3.3.0"
+    "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@aurodesignsystem/auro-cli": "^3.0.3",
-    "@aurodesignsystem/auro-config": "^1.3.0",
-    "@aurodesignsystem/auro-library": "^5.5.3",
-    "@aurodesignsystem/design-tokens": "^8.4.4",
-    "@aurodesignsystem/webcorestylesheets": "^10.0.4",
+    "@aurodesignsystem/auro-cli": "^3.5.0",
+    "@aurodesignsystem/auro-config": "^1.3.1",
+    "@aurodesignsystem/auro-library": "^5.5.4",
+    "@aurodesignsystem/design-tokens": "^8.7.0",
+    "@aurodesignsystem/webcorestylesheets": "^10.1.4",
     "husky": "^9.1.7"
   },
   "browserslist": [
@@ -39,7 +39,8 @@
     "last 2 Safari major versions"
   ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "keywords": [
     "alaska airlines",
@@ -55,14 +56,20 @@
     "lint:fix": "biome check --fix --no-errors-on-unmatched && stylelint \"./src/**/*.scss\" --fix",
     "test": "auro test",
     "test:watch": "auro test --watch",
-    "prepare": "husky"
+    "prepare": "husky",
+    "test:coverage": "auro test --coverage-report --open"
   },
   "exports": {
     "./package.json": "./package.json",
     "./readme.md": "./README.md",
-    ".": "./dist/registered.js",
+    ".": {
+      "module": "./dist/registered.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/registered.js"
+    },
     "./demo/*.md": "./demo/*.md",
     "./demo/*.js": "./demo/*.min.js",
+    "./custom-elements.json": "./custom-elements.json",
     "./class": {
       "module": "./dist/index.js",
       "types": "./dist/index.d.ts",
@@ -75,6 +82,8 @@
     "CHANGELOG.md",
     "README.md",
     "LICENSE",
-    "NOTICE"
-  ]
+    "NOTICE",
+    "custom-elements.json"
+  ],
+  "customElements": "custom-elements.json"
 }