@aurodesignsystem-dev/auro-dialog 0.0.0-pr103.0

package/dist/index.d.ts

@@ -0,0 +1,230 @@
+
+import type { AuroDialog } from "src/auro-dialog.js";
+import type { ComponentBase } from "src/componentBase.js";
+
+/**
+ * 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 AuroDialogProps = {
+  /** Defines whether the close button should be light colored for use on dark backgrounds. */
+  "close-button-appearance"?: AuroDialog['closeButtonAppearance'];
+  /** Defines whether the close button should be light colored for use on dark backgrounds. */
+  "closeButtonAppearance"?: AuroDialog['closeButtonAppearance'];
+  /** Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.
+Must be used in conjunction with sm or md to have an effect. */
+  "lg"?: AuroDialog['lg'];
+  /** Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. */
+  "md"?: AuroDialog['md'];
+  /** Modal dialog restricts the user to take an action (no default close actions). */
+  "modal"?: AuroDialog['modal'];
+  /** DEPRECATED - use `close-button-appearance="inverse" instead. */
+  "onDark"?: AuroDialog['onDark'];
+  /** Sets state of dialog to open. */
+  "open"?: AuroDialog['open'];
+  /** Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile. */
+  "sm"?: AuroDialog['sm'];
+  /** Unformatted dialog window, edge-to-edge fill for content. */
+  "unformatted"?: AuroDialog['unformatted'];
+  /** The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. */
+  "triggerElement"?: AuroDialog['triggerElement'];
+
+  /** Event fires when the element is closed */
+  "ontoggle"?: (e: CustomEvent<never>) => void;
+}
+
+
+  export type CustomElements = {
+
+
+  /**
+     * The `auro-dialog` appears on top of the page and presents information that requires the users immediate attention.
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `close-button-appearance`/`closeButtonAppearance`: Defines whether the close button should be light colored for use on dark backgrounds. 
+ * - `lg`: Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.
+ * Must be used in conjunction with sm or md to have an effect. 
+ * - `md`: Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. 
+ * - `modal`: Modal dialog restricts the user to take an action (no default close actions). 
+ * - `onDark`: DEPRECATED - use `close-button-appearance="inverse" instead. 
+ * - `open`: Sets state of dialog to open. 
+ * - `sm`: Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile. 
+ * - `unformatted`: Unformatted dialog window, edge-to-edge fill for content. 
+ * - `triggerElement`: The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. (property only)
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `toggle`: Event fires when the element is closed
+ * 
+ * ## Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `ariaLabel.dialog.close`: Text to describe the "x" icon close button for screen readers. Default: "Close".
+ * - `content`: Injects content into the body of the modal
+ * - `footer`: Used for action options, e.g. buttons
+ * - `header`: Text to display as the header of the modal
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `_initializeDefaults() => void`: undefined
+ * - `register(name?: string = "auro-dialog") => void`: This will register this element with the browser.
+ * 
+ * ## CSS Parts
+ * 
+ * Custom selectors for styling elements within the component.
+ * 
+ * - `close-button`: adjust position of the close X icon in the dialog window
+ * - `dialog`: apply CSS to the entire dialog
+ * - `dialog-content`: apply CSS to the content of the dialog
+ * - `dialog-footer`: apply CSS to the footer of the dialog
+ * - `dialog-header`: apply CSS to the header of the dialog
+ * - `dialog-overlay`: apply CSS on the overlay of the dialog
+  */
+    "auro-dialog": Partial<AuroDialogProps & BaseProps<AuroDialog> & 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 { AuroDialog } from "./index.js";

package/dist/index.js

@@ -0,0 +1 @@
+export{A as AuroDialog}from"./auro-dialog-BNnIwNXB.js";import"lit";import"lit/directives/class-map.js";import"lit/static-html.js";import"lit/directives/if-defined.js";

package/dist/registered.js

@@ -0,0 +1 @@
+import{A as i}from"./auro-dialog-BNnIwNXB.js";import"lit";import"lit/directives/class-map.js";import"lit/static-html.js";import"lit/directives/if-defined.js";i.register();

package/package.json

@@ -0,0 +1,93 @@
+{
+  "//": [
+    "================================================================================",
+    "# To work within the development environment, run the following tasks",
+    "  1. $ npm run dev",
+    "  2. Go to http://localhost:8000",
+    "================================================================================"
+  ],
+  "name": "@aurodesignsystem-dev/auro-dialog",
+  "version": "0.0.0-pr103.0",
+  "description": "auro-dialog HTML custom element",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AlaskaAirlines/auro-dialog"
+  },
+  "type": "module",
+  "main": "dist/registered.js",
+  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "engines": {
+    "node": ">=20"
+  },
+  "dependencies": {
+    "lit": "^3.3.1"
+  },
+  "devDependencies": {
+    "@aurodesignsystem/auro-button": "^12.3.0",
+    "@aurodesignsystem/auro-cli": "^3.5.0",
+    "@aurodesignsystem/auro-config": "^1.3.1",
+    "@aurodesignsystem/auro-icon": "^9.1.1",
+    "@aurodesignsystem/auro-library": "^5.5.4",
+    "@aurodesignsystem/design-tokens": "^8.7.0",
+    "@aurodesignsystem/webcorestylesheets": "^10.1.4",
+    "husky": "^9.1.7"
+  },
+  "browserslist": [
+    "last 2 Chrome versions",
+    "last 2 iOS major versions",
+    "last 2 Firefox versions",
+    "last 2 Edge versions",
+    "last 2 Safari major versions"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "keywords": [
+    "alaska airlines",
+    "auro",
+    "design system",
+    "web components"
+  ],
+  "scripts": {
+    "build": "auro build",
+    "build:version": "node ./scripts/version.mjs",
+    "./custom-elements.json": "./custom-elements.json",
+    "dev": "auro dev -w -s",
+    "dev:open": "auro dev -w -s --open",
+    "lint": "biome check --no-errors-on-unmatched && stylelint \"./src/**/*.scss\"",
+    "lint:fix": "biome check --fix --no-errors-on-unmatched && stylelint \"./src/**/*.scss\" --fix",
+    "test": "auro test",
+    "test:watch": "auro test --watch",
+    "test:coverage": "auro test --coverage-report --open",
+    "prepare": "husky",
+    "cem": "auro docs --cem --api"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    "./readme.md": "./README.md",
+    "./custom-elements.json": "./custom-elements.json",
+    ".": {
+      "module": "./dist/registered.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/registered.js"
+    },
+    "./demo/*.md": "./demo/*.md",
+    "./demo/*.js": "./demo/*.min.js",
+    "./class": {
+      "module": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist/**/*",
+    "demo/**/*",
+    "CHANGELOG.md",
+    "README.md",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "customElements": "custom-elements.json"
+}