kemet-ui 5.0.3 → 5.0.5

package/dist/{constants-Dj9X-JwG.d.ts → constants-BsAfWV-a.d.ts}

@@ -179,7 +179,6 @@ declare enum EnumInputModes {
  *
  */
 declare class HTMLKemetInputElement extends LitElement {
-    /** @internal */
     formSubmitController: FormSubmitController;
     static styles: lit.CSSResult[];
     slug: string;
@@ -218,6 +217,7 @@ declare class HTMLKemetInputElement extends LitElement {
     form: HTMLFormElement;
     input: HTMLInputElement;
     constructor();
+    updated(changedProperties: Map<string, any>): void;
     firstUpdated(): void;
     render(): lit_html.TemplateResult<1>;
     handleLeftChange(): void;
@@ -375,6 +375,7 @@ declare class HTMLKemetTextareaElement extends LitElement {
     dom: string;
     constructor();
     firstUpdated(): void;
+    updated(changedProperties: Map<string, any>): void;
     render(): lit_html.TemplateResult<1>;
     /**
      * Handles when the textarea receives focus
@@ -460,7 +461,7 @@ declare class HTMLKemetFieldElement extends LitElement {
     label: string;
     message: string;
     focused: boolean;
-    appearance: EnumAppearances;
+    appearance?: EnumAppearances;
     filled: boolean;
     length: number;
     disabled: boolean;
@@ -472,7 +473,6 @@ declare class HTMLKemetFieldElement extends LitElement {
     slotCombo: KemetCombo;
     firstUpdated(): void;
     render(): lit_html.TemplateResult<1>;
-    makeStatusMessage(): lit_html.TemplateResult<1> | null;
     handleFocused(event: Event): void;
     handleAppearance(event: Event): void;
     handleInput(event: Event): void;
@@ -573,4 +573,4 @@ interface InterfaceInputDetails {
     value?: string;
 }
 
-export { EnumRoundedSizes as E, HTMLKemetFieldElement as H, type InterfaceKemetSelectionEvent as I, KemetCombo as K, type TypeAppearance as T, KemetCount as a, type InterfaceInputDetails as b, HTMLKemetInputElement as c, type TypeRoundedSizes as d, EnumAppearances as e, HTMLKemetTextareaElement as f, EnumAxis as g, EnumDirections as h, EnumAriaAutoComplete as i, EnumAutoComplete as j, EnumInputModes as k, EnumInputTypes as l, type InterfaceAppearanceChangeEvent as m };
+export { EnumAppearances as E, HTMLKemetFieldElement as H, type InterfaceKemetSelectionEvent as I, KemetCombo as K, type TypeAppearance as T, KemetCount as a, type InterfaceInputDetails as b, HTMLKemetInputElement as c, type TypeRoundedSizes as d, EnumRoundedSizes as e, HTMLKemetTextareaElement as f, EnumAxis as g, EnumDirections as h, EnumAriaAutoComplete as i, EnumAutoComplete as j, EnumInputModes as k, EnumInputTypes as l, type InterfaceAppearanceChangeEvent as m };

package/dist/elements/accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/accordion/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/accordion/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport HTMLKemetAccordionPanelElement from '../accordion-panel';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-accordion\n * @summary A component that acts like a standard accordion.\n * @ssrsafe yes\n *\n * @prop {number} currentPanel - The index value for the most recently opened panel\n * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened\n *\n * @fires kemet-accordion-mounted - Fired when the accordion is mounted to the DOM\n * @detail {HTMLElement} element - The accordion element\n */\n\n@customElement('kemet-accordion')\nexport default class KemetAccordion extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number, attribute: 'current-panel' })\n  currentPanel: number = 0;\n\n  @property({ type: Boolean, attribute: 'toggle-panels' })\n  togglePanels: boolean = false;\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  panels!: NodeListOf<HTMLKemetAccordionPanelElement>;\n\n  @state()\n  onKeyDown!: (event: KeyboardEvent) => void;\n\n  @state()\n  currentPanelFocus!: number;\n\n  handlePanelOpenedBound!: (event: Event) => void;\n\n  constructor() {\n    super();\n    this.handlePanelOpenedBound = this.handlePanelOpened.bind(this);\n    this.addEventListener('kemet-opened', this.handlePanelOpenedBound);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('kemet-opened', this.handlePanelOpenedBound);\n    this.panels?.forEach((panel) => {\n      panel.removeEventListener('keydown', this.onKeyDown);\n    });\n  }\n\n  firstUpdated() {\n    this.onKeyDown = event => this.handleKeyDown(event);\n    emitEvent(this, 'kemet-accordion-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;\n  }\n\n  handleSlotChange() {\n    const newPanels = this.querySelectorAll('kemet-accordion-panel');\n\n    // Remove listeners from panels that are no longer in the DOM\n    if (this.panels) {\n      this.panels.forEach((oldPanel) => {\n        if (!Array.from(newPanels).includes(oldPanel)) {\n          oldPanel.removeEventListener('keydown', this.onKeyDown);\n        }\n      });\n    }\n\n    this.panels = newPanels;\n\n    this.panels.forEach((panel: HTMLKemetAccordionPanelElement, index) => {\n      panel.index = index;\n      panel.addEventListener('keydown', this.onKeyDown);\n    });\n  }\n\n  handlePanelOpened(event: Event) {\n    const customEvent = event as CustomEvent;\n    this.panels?.forEach((panel: HTMLKemetAccordionPanelElement) => {\n      if (panel === customEvent.detail) {\n        this.currentPanel = panel.index;\n      }\n    });\n\n    if (this.togglePanels) {\n      this.panels?.forEach((panel: HTMLKemetAccordionPanelElement) => {\n        if (panel !== customEvent.detail.element) {\n          panel.opened = false;\n        }\n      });\n    }\n  }\n\n  navigatePanels(direction: string) {\n    switch (direction) {\n      case 'home':\n        this.currentPanel = 0;\n        break;\n      case 'end':\n        this.currentPanel = this.panels.length - 1;\n        break;\n      case 'next':\n        this.currentPanel += 1;\n        break;\n      case 'prev':\n        this.currentPanel -= 1;\n        break;\n      default:\n        this.currentPanelFocus = 0;\n        break;\n    }\n\n    if (this.currentPanel > this.panels.length - 1) this.currentPanel = 0;\n    if (this.currentPanel < 0) this.currentPanel = this.panels.length - 1;\n\n    this.panels[this.currentPanel]?.shadowRoot?.querySelector('button')?.focus();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    switch (event.key) {\n      case 'Enter':\n      case 'Space':\n        event.preventDefault();\n        target.click();\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.navigatePanels('prev');\n        break;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        this.navigatePanels('next');\n        break;\n      case 'End':\n        event.preventDefault();\n        this.navigatePanels('end');\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.navigatePanels('home');\n        break;\n      default:\n        break;\n    }\n  }\n\n  /**\n   * Expands all panels in the accordion\n   * @public\n   * @method expandAll\n   * @returns {void}\n   */\n  expandAll(): void {\n    this.panels.forEach((panel) => {\n      panel.opened = true;\n    });\n  }\n\n  /**\n   * Collapses all panels in the accordion\n   * @public\n   * @method collapseAll\n   * @returns {void}\n   */\n  collapseAll(): void {\n    this.panels.forEach((panel) => {\n      panel.opened = false;\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-accordion': KemetAccordion\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: block;\n}\n`;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/accordion/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/accordion/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport HTMLKemetAccordionPanelElement from '../accordion-panel';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-accordion\n * @summary A component that acts like a standard accordion.\n * @ssrsafe yes\n *\n * @prop {number} currentPanel - The index value for the most recently opened panel\n * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened\n *\n * @fires kemet-accordion-mounted - Fired when the accordion is mounted to the DOM\n * @detail {HTMLElement} element - The accordion element\n */\n\n@customElement('kemet-accordion')\nexport default class KemetAccordion extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number, attribute: 'current-panel' })\n  currentPanel: number = 0;\n\n  @property({ type: Boolean, attribute: 'toggle-panels' })\n  togglePanels: boolean = false;\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  panels!: NodeListOf<HTMLKemetAccordionPanelElement>;\n\n  @state()\n  onKeyDown!: (event: KeyboardEvent) => void;\n\n  @state()\n  currentPanelFocus!: number;\n\n  handlePanelOpenedBound!: (event: Event) => void;\n\n  constructor() {\n    super();\n    this.handlePanelOpenedBound = this.handlePanelOpened.bind(this);\n    this.addEventListener('kemet-opened', this.handlePanelOpenedBound);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('kemet-opened', this.handlePanelOpenedBound);\n    this.panels?.forEach((panel) => {\n      panel.removeEventListener('keydown', this.onKeyDown);\n    });\n  }\n\n  firstUpdated() {\n    this.onKeyDown = event => this.handleKeyDown(event);\n    emitEvent(this, 'kemet-accordion-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;\n  }\n\n  handleSlotChange() {\n    const newPanels = this.querySelectorAll('kemet-accordion-panel');\n\n    // Remove listeners from panels that are no longer in the DOM\n    if (this.panels) {\n      this.panels.forEach((oldPanel) => {\n        if (!Array.from(newPanels).includes(oldPanel)) {\n          oldPanel.removeEventListener('keydown', this.onKeyDown);\n        }\n      });\n    }\n\n    this.panels = newPanels;\n\n    this.panels.forEach((panel: HTMLKemetAccordionPanelElement, index) => {\n      panel.index = index;\n      panel.addEventListener('keydown', this.onKeyDown);\n    });\n  }\n\n  handlePanelOpened(event: Event) {\n    const customEvent = event as CustomEvent;\n    this.panels?.forEach((panel: HTMLKemetAccordionPanelElement) => {\n      if (panel === customEvent.detail) {\n        this.currentPanel = panel.index;\n      }\n    });\n\n    if (this.togglePanels) {\n      this.panels?.forEach((panel: HTMLKemetAccordionPanelElement) => {\n        if (panel !== customEvent.detail.element) {\n          panel.opened = false;\n        }\n      });\n    }\n  }\n\n  navigatePanels(direction: string) {\n    switch (direction) {\n      case 'home':\n        this.currentPanel = 0;\n        break;\n      case 'end':\n        this.currentPanel = this.panels.length - 1;\n        break;\n      case 'next':\n        this.currentPanel += 1;\n        break;\n      case 'prev':\n        this.currentPanel -= 1;\n        break;\n      default:\n        this.currentPanelFocus = 0;\n        break;\n    }\n\n    if (this.currentPanel > this.panels.length - 1) this.currentPanel = 0;\n    if (this.currentPanel < 0) this.currentPanel = this.panels.length - 1;\n\n    this.panels[this.currentPanel]?.shadowRoot?.querySelector('button')?.focus();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    switch (event.key) {\n      case 'Enter':\n      case 'Space':\n        event.preventDefault();\n        target.click();\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.navigatePanels('prev');\n        break;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        this.navigatePanels('next');\n        break;\n      case 'End':\n        event.preventDefault();\n        this.navigatePanels('end');\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.navigatePanels('home');\n        break;\n      default:\n        break;\n    }\n  }\n\n  /**\n   * Expands all panels in the accordion\n   * @public\n   * @method expandAll\n   * @returns {void}\n   */\n  expandAll(): void {\n    this.panels.forEach((panel) => {\n      panel.opened = true;\n    });\n  }\n\n  /**\n   * Collapses all panels in the accordion\n   * @public\n   * @method collapseAll\n   * @returns {void}\n   */\n  collapseAll(): void {\n    this.panels.forEach((panel) => {\n      panel.opened = false;\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-accordion': KemetAccordion\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: block;\n}\n`;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/elements/accordion-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/accordion-panel/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/accordion-panel/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\n\nimport styles from './styles.css.ts';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-accordion-panel\n * @summary A blade for an accordion.\n * @ssrsafe yes\n *\n * @prop {boolean} opened - Determines the opened state of the panel\n * @prop {string} maxHeight - Sets the max height of the panel's body\n * @prop {string} slug - Uniquely identifies a panel for accessibility purposes\n *\n * @slot trigger - The trigger button that opens and closes the panel.\n * @slot body - The body content of the panel.\n * @slot icon - The icon for the panel.\n *\n * @csspart trigger - Contains the trigger for the panel.\n * @csspart body - Contains the body for the panel.\n *\n * @fires kemet-opened - Fires when a panel is opened\n * @detail {HTMLElement} element - The accordion panel element\n *\n * @fires kemet-closed - Fires when a panel is closed\n * @detail {HTMLElement} element - The accordion panel element\n *\n * @fires kemet-accordion-panel-mounted - Fired when the accordion panel is mounted to the DOM\n * @detail {HTMLElement} element - The accordion panel element\n *\n */\n\n@customElement('kemet-accordion-panel')\nexport default class KemetAccordionPanel extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean | undefined = undefined;\n\n  @property({ type: String, attribute: 'max-height' })\n  maxHeight: string = '0px';\n\n  @property({ type: String })\n  slug: string = 'panel';\n\n  @property({ type: Number })\n  index!: number;\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  /** @internal */\n  @state()\n  focusableSelector!: string;\n\n  /** @internal */\n  @state()\n  bodyElement!: HTMLElement | null;\n\n  /** @internal */\n  @state()\n  bodyElementFirst: HTMLElement | null | undefined;\n\n  /** @internal */\n  @state()\n  bodyElementLast: HTMLElement | null | undefined;\n\n  firstUpdated() {\n    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';\n    this.bodyElement = this.querySelector('[slot=\"body\"]');\n    this.bodyElementFirst = this.bodyElement?.querySelector(':first-child');\n    this.bodyElementLast = this.bodyElement?.querySelector(':last-child');\n\n    if (this.bodyElementFirst) this.bodyElementFirst.style.marginTop = '0';\n    if (this.bodyElementLast) this.bodyElementLast.style.marginBottom = '0';\n\n    emitEvent(this, 'kemet-accordion-panel-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      this.maxHeight = `${this.bodyElement?.offsetHeight}px`;\n      emitEvent(this, 'kemet-opened', { element: this });\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      this.maxHeight = '0px';\n      emitEvent(this, 'kemet-closed', { element: this });\n    }\n\n    this.a11y();\n    this.focusableBodyElements();\n  }\n\n  render() {\n    return html`\n      <button\n        class=\"trigger\"\n        part=\"trigger\"\n        @click=${() => this.toggle()}\n        @keydown=${(event: KeyboardEvent) => this.handleKeyDown(event)}\n      >\n        <slot name=\"trigger\"></slot>\n        <slot name=\"icon\"></slot>\n      </button>\n      <section class=\"body\" part=\"body\" style=\"max-height:${this.maxHeight};\">\n        <slot name=\"body\"></slot>\n      </section>\n    `;\n  }\n\n  /**\n   * Toggles the opened state of the panel.\n   * @method toggle\n   * @public\n   * @returns {void}\n   */\n  toggle() {\n    this.opened = !this.opened;\n  }\n\n  focusableBodyElements() {\n    const focusableElements = this.bodyElement?.querySelectorAll(this.focusableSelector);\n\n    if (this.opened) {\n      focusableElements?.forEach((element) => {\n        element.removeAttribute('tabindex');\n      });\n    } else {\n      focusableElements?.forEach((element) => {\n        element.setAttribute('tabindex', '-1');\n      });\n    }\n  }\n\n  a11y() {\n    const trigger = this.shadowRoot?.querySelector('.trigger');\n    const body = this.shadowRoot?.querySelector('.body');\n\n    trigger?.setAttribute('id', `${this.slug}-button`);\n    trigger?.setAttribute('aria-controls', `${this.slug}-content`);\n\n    body?.setAttribute('id', `${this.slug}-content`);\n    body?.setAttribute('aria-labelledby', `${this.slug}-button`);\n    body?.setAttribute('aria-hidden', `${!this.opened}`);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Space' || event.key === 'Enter') {\n      this.toggle();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-accordion-panel': KemetAccordionPanel\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n  padding: 1.5rem 1rem;\n  border-bottom: 1px solid;\n}\n\n.trigger {\n  color: inherit;\n  cursor: pointer;\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: 1fr auto;\n  width: 100%;\n  text-align: left;\n  padding: 0;\n  border: none;\n  background: none;\n}\n\n.body {\n  overflow: hidden;\n  transition: all 300ms ease;\n}\n\n::slotted([slot='body']) {\n  padding: 1rem 0;\n}\n`;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/accordion-panel/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/accordion-panel/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\n\nimport styles from './styles.css.ts';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-accordion-panel\n * @summary A blade for an accordion.\n * @ssrsafe yes\n *\n * @prop {boolean} opened - Determines the opened state of the panel\n * @prop {string} maxHeight - Sets the max height of the panel's body\n * @prop {string} slug - Uniquely identifies a panel for accessibility purposes\n *\n * @slot trigger - The trigger button that opens and closes the panel.\n * @slot body - The body content of the panel.\n * @slot icon - The icon for the panel.\n *\n * @csspart trigger - Contains the trigger for the panel.\n * @csspart body - Contains the body for the panel.\n *\n * @fires kemet-opened - Fires when a panel is opened\n * @detail {HTMLElement} element - The accordion panel element\n *\n * @fires kemet-closed - Fires when a panel is closed\n * @detail {HTMLElement} element - The accordion panel element\n *\n * @fires kemet-accordion-panel-mounted - Fired when the accordion panel is mounted to the DOM\n * @detail {HTMLElement} element - The accordion panel element\n *\n */\n\n@customElement('kemet-accordion-panel')\nexport default class KemetAccordionPanel extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean | undefined = undefined;\n\n  @property({ type: String, attribute: 'max-height' })\n  maxHeight: string = '0px';\n\n  @property({ type: String })\n  slug: string = 'panel';\n\n  @property({ type: Number })\n  index!: number;\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  /** @internal */\n  @state()\n  focusableSelector!: string;\n\n  /** @internal */\n  @state()\n  bodyElement!: HTMLElement | null;\n\n  /** @internal */\n  @state()\n  bodyElementFirst: HTMLElement | null | undefined;\n\n  /** @internal */\n  @state()\n  bodyElementLast: HTMLElement | null | undefined;\n\n  firstUpdated() {\n    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';\n    this.bodyElement = this.querySelector('[slot=\"body\"]');\n    this.bodyElementFirst = this.bodyElement?.querySelector(':first-child');\n    this.bodyElementLast = this.bodyElement?.querySelector(':last-child');\n\n    if (this.bodyElementFirst) this.bodyElementFirst.style.marginTop = '0';\n    if (this.bodyElementLast) this.bodyElementLast.style.marginBottom = '0';\n\n    emitEvent(this, 'kemet-accordion-panel-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      this.maxHeight = `${this.bodyElement?.offsetHeight}px`;\n      emitEvent(this, 'kemet-opened', { element: this });\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      this.maxHeight = '0px';\n      emitEvent(this, 'kemet-closed', { element: this });\n    }\n\n    this.a11y();\n    this.focusableBodyElements();\n  }\n\n  render() {\n    return html`\n      <button\n        class=\"trigger\"\n        part=\"trigger\"\n        @click=${() => this.toggle()}\n        @keydown=${(event: KeyboardEvent) => this.handleKeyDown(event)}\n      >\n        <slot name=\"trigger\"></slot>\n        <slot name=\"icon\"></slot>\n      </button>\n      <section class=\"body\" part=\"body\" style=\"max-height:${this.maxHeight};\">\n        <slot name=\"body\"></slot>\n      </section>\n    `;\n  }\n\n  /**\n   * Toggles the opened state of the panel.\n   * @method toggle\n   * @public\n   * @returns {void}\n   */\n  toggle() {\n    this.opened = !this.opened;\n  }\n\n  focusableBodyElements() {\n    const focusableElements = this.bodyElement?.querySelectorAll(this.focusableSelector);\n\n    if (this.opened) {\n      focusableElements?.forEach((element) => {\n        element.removeAttribute('tabindex');\n      });\n    } else {\n      focusableElements?.forEach((element) => {\n        element.setAttribute('tabindex', '-1');\n      });\n    }\n  }\n\n  a11y() {\n    const trigger = this.shadowRoot?.querySelector('.trigger');\n    const body = this.shadowRoot?.querySelector('.body');\n\n    trigger?.setAttribute('id', `${this.slug}-button`);\n    trigger?.setAttribute('aria-controls', `${this.slug}-content`);\n\n    body?.setAttribute('id', `${this.slug}-content`);\n    body?.setAttribute('aria-labelledby', `${this.slug}-button`);\n    body?.setAttribute('aria-hidden', `${!this.opened}`);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Space' || event.key === 'Enter') {\n      this.toggle();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-accordion-panel': KemetAccordionPanel\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n  padding: 1.5rem 1rem;\n  border-bottom: 1px solid;\n}\n\n.trigger {\n  color: inherit;\n  cursor: pointer;\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: 1fr auto;\n  width: 100%;\n  text-align: left;\n  padding: 0;\n  border: none;\n  background: none;\n}\n\n.body {\n  overflow: hidden;\n  transition: all 300ms ease;\n}\n\n::slotted([slot='body']) {\n  padding: 1rem 0;\n}\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/alert/index.d.ts

@@ -1,7 +1,7 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
-import { T as TypeAppearance, d as TypeRoundedSizes } from '../../constants-Dj9X-JwG.js';
+import { T as TypeAppearance, d as TypeRoundedSizes } from '../../constants-BsAfWV-a.js';
 import '../../form-controller-3q581XcZ.js';
 
 declare enum EnumOverlayPositions {

package/dist/elements/alert/index.js

@@ -67,8 +67,8 @@ var styles_css_default = css`:host {
     --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);
   }
 
-  :host([filled][appearance="brand"]) {
-    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);
+  :host([filled][appearance=brand]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);
   }
 
   :host([filled][appearance="success"]) {
@@ -111,8 +111,8 @@ var styles_css_default = css`:host {
     border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);
   }
 
-  :host([appearance="brand"]) {
-    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);
+  :host([appearance=brand]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);
   }
 
   :host([appearance="success"]) {

package/dist/elements/alert/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/alert/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/alert/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport * as constants from '../../utilities/constants';\nimport styles from './styles.css.ts';\n\nexport enum EnumOverlayPositions {\n  FIXED = 'fixed',\n  TOP_FULL = 'top-full',\n  BOTTOM_FULL = 'bottom-full',\n  TOP_RIGHT = 'top-right',\n  TOP_LEFT = 'top-left',\n  BOTTOM_RIGHT = 'bottom-right',\n  BOTTOM_LEFT = 'bottom-left'\n}\n\nexport enum EnumBorderAppearances {\n  Top = 'top',\n  Right = 'right',\n  Bottom = 'bottom',\n  Left = 'left'\n}\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-alert\n * @summary Calls out important messages and notifications.\n * @ssrsafe yes\n *\n * @prop {boolean} opened - Determines if the alert is opened or not.\n * @prop {boolean} reveal - Fades in the alert when opened.\n * @prop {boolean} closable - Adds a close button to the alert.\n * @prop {EnumBorderAppearances} borderStatus - Adds a border that indicates the status.\n * @prop {boolean} hidden - Hides the element from document flow.\n * @prop {TypeOverlayPositions} overlay - Fixes the alert over content in specified position.\n * @prop {TypeVariants} variant - The style of the alert.\n * @prop {TypeRoundedSizes} rounded - The rounded size of the alert.\n * @prop {boolean} filled - Determines if the alert uses the filled style.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @slot icon - The icon of the alert.\n * @slot default - The contents of the alert.\n *\n * @fires kemet-opened - Fires when alert is opened.\n * @detail {HTMLElement} element - The alert element\n *\n * @fires kemet-closed - Fires when alert is closed.\n * @detail {HTMLElement} element - The alert element\n *\n * @fires kemet-alert-mounted - Fired when the alert is mounted to the DOM\n * @detail {HTMLElement} element - The alert element\n *\n * @csspart close - Container for the close button.\n * @csspart message - Container for the alert message.\n *\n * @cssproperty --kemet-alert-padding - The padding on the alert.\n * @cssproperty --kemet-alert-border-thickness - The thickness of the border.\n * @cssproperty --kemet-alert-align-items - The alert's alignment.\n *\n */\n\n@customElement('kemet-alert')\nexport default class KemetAlert extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true })\n  opened!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  reveal: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  closable: boolean = false;\n\n  @property({ type: String, reflect: true })\n  appearance: constants.TypeAppearance = constants.EnumAppearances.Neutral;\n\n  @property({ type: String, reflect: true, attribute: 'border-appearance' })\n  borderAppearance!: string;\n\n  @property({ type: Boolean, reflect: true })\n  hidden!: boolean;\n\n  @property({ type: String, reflect: true })\n  overlay!: string;\n\n  @property({ type: String, reflect: true })\n  rounded!: constants.TypeRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  filled!: boolean;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  private handleTransitionEnd = () => {\n    if (!this.opened) {\n      this.hidden = true;\n    }\n  };\n\n  private handleAnimationEnd = () => {\n    this.reveal = false;\n  };\n\n  shouldUpdate(prevProps: Map<string, never>) {\n    if (prevProps.has('opened') && !prevProps.get('opened')) {\n      this.hidden = false;\n      this.reveal = true;\n    }\n\n    return true;\n  }\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-alert-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n    this.handleMotion();\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-opened', this);\n    } else {\n      emitEvent(this, 'kemet-closed', this);\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"icon\"></slot>\n      <div part=\"message\">\n        <slot></slot>\n      </div>\n      <div class=\"close\" part=\"close\">\n        ${this.makeCloseBtn()}\n      </div>\n    `;\n  }\n\n  private makeCloseBtn() {\n    if (this.closable) {\n      return html`<kemet-icon-bootstrap icon=\"x-lg\" @click=${() => { this.opened = false; }}></kemet-icon-bootstrap>`;\n    }\n\n    return null;\n  }\n\n  private handleMotion() {\n    this.addEventListener('transitionend', this.handleTransitionEnd);\n    this.addEventListener('animationend', this.handleAnimationEnd);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('transitionend', this.handleTransitionEnd);\n    this.removeEventListener('animationend', this.handleAnimationEnd);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-alert': KemetAlert\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n    /* public */\n    --kemet-alert-align-items: center;\n    --kemet-alert-padding: 1rem;\n    --kemet-alert-border-thickness: 4px;\n\n    /* private */\n    --_kemet-alert-appearance-color: var(--kemet-color-font-base);\n    --_kemet-alert-border: 1px solid;\n    --_kemet-alert-radius: 0;\n    --_kemet-alert-color: inherit;\n    --_kemet-alert-background-color: transparent;\n\n    color: var(--_kemet-alert-color);\n    display: flex;\n    grid-template-columns: auto 1fr auto;\n    gap: var(--kemet-alert-padding);\n    align-items: var(--kemet-alert-align-items);\n    opacity: 0;\n    padding: var(--kemet-alert-padding);\n    border: var(--_kemet-alert-border);\n    transition: opacity 300ms ease;\n    border-radius: var(--_kemet-alert-radius);\n    background-color: var(--_kemet-alert-background-color);\n  }\n\n  :host([polarity=dark]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-font-inverse-base);\n  }\n\n  :host([opened]) {\n    opacity: 1;\n  }\n\n  :host([filled]) {\n    --_kemet-alert-border: 2px solid var(--kemet-color-font-inverse-base);\n    --_kemet-alert-color: var(--kemet-color-font-inverse-base);\n    --_kemet-alert-background-color: var(--_kemet-alert-appearance-color);\n    --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);\n  }\n\n  :host([filled][appearance=\"brand\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);\n  }\n\n  :host([filled][appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([filled][appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([filled][appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([filled][appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([filled][appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([appearance]) {\n    border-color: var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"top\"]) {\n    border-top: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"right\"]) {\n    border-right: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"bottom\"]) {\n    border-bottom: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"left\"]) {\n    border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([appearance=\"brand\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);\n  }\n\n  :host([appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([reveal]) {\n    animation: fadeIn 300ms ease forwards;\n  }\n\n  :host([overlay]) {\n    position: fixed;\n  }\n\n  :host([overlay*=\"full\"]) {\n    width: 100%;\n  }\n\n  :host([overlay*=\"top\"]) {\n    top: 0;\n  }\n\n  :host([overlay*=\"bottom\"]) {\n    bottom: 0;\n  }\n\n  :host([overlay*=\"left\"]) {\n    left: 0;\n  }\n\n  :host([overlay*=\"right\"]) {\n    right: 0;\n  }\n\n  :host([rounded]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"sm\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=\"md\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"lg\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=\"xl\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=\"circle\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=\"pill\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-pill);\n  }\n\n  [part=message] {\n    display: flex;\n    gap: 0.75rem;\n    align-items: center;\n  }\n\n  .close {\n    cursor: pointer;\n    margin-left: auto;\n  }\n\n  :host(:not([filled])) ::slotted(kemet-icon) {\n    color: var(--_kemet-alert-appearance-color);\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n"],"mappings":"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","names":["EnumOverlayPositions","EnumBorderAppearances"]}
+{"version":3,"sources":["../../../src/elements/alert/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/alert/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport * as constants from '../../utilities/constants';\nimport styles from './styles.css.ts';\n\nexport enum EnumOverlayPositions {\n  FIXED = 'fixed',\n  TOP_FULL = 'top-full',\n  BOTTOM_FULL = 'bottom-full',\n  TOP_RIGHT = 'top-right',\n  TOP_LEFT = 'top-left',\n  BOTTOM_RIGHT = 'bottom-right',\n  BOTTOM_LEFT = 'bottom-left'\n}\n\nexport enum EnumBorderAppearances {\n  Top = 'top',\n  Right = 'right',\n  Bottom = 'bottom',\n  Left = 'left'\n}\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-alert\n * @summary Calls out important messages and notifications.\n * @ssrsafe yes\n *\n * @prop {boolean} opened - Determines if the alert is opened or not.\n * @prop {boolean} reveal - Fades in the alert when opened.\n * @prop {boolean} closable - Adds a close button to the alert.\n * @prop {EnumBorderAppearances} borderStatus - Adds a border that indicates the status.\n * @prop {boolean} hidden - Hides the element from document flow.\n * @prop {TypeOverlayPositions} overlay - Fixes the alert over content in specified position.\n * @prop {TypeVariants} variant - The style of the alert.\n * @prop {TypeRoundedSizes} rounded - The rounded size of the alert.\n * @prop {boolean} filled - Determines if the alert uses the filled style.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @slot icon - The icon of the alert.\n * @slot default - The contents of the alert.\n *\n * @fires kemet-opened - Fires when alert is opened.\n * @detail {HTMLElement} element - The alert element\n *\n * @fires kemet-closed - Fires when alert is closed.\n * @detail {HTMLElement} element - The alert element\n *\n * @fires kemet-alert-mounted - Fired when the alert is mounted to the DOM\n * @detail {HTMLElement} element - The alert element\n *\n * @csspart close - Container for the close button.\n * @csspart message - Container for the alert message.\n *\n * @cssproperty --kemet-alert-padding - The padding on the alert.\n * @cssproperty --kemet-alert-border-thickness - The thickness of the border.\n * @cssproperty --kemet-alert-align-items - The alert's alignment.\n *\n */\n\n@customElement('kemet-alert')\nexport default class KemetAlert extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true })\n  opened!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  reveal: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  closable: boolean = false;\n\n  @property({ type: String, reflect: true })\n  appearance: constants.TypeAppearance = constants.EnumAppearances.Neutral;\n\n  @property({ type: String, reflect: true, attribute: 'border-appearance' })\n  borderAppearance!: string;\n\n  @property({ type: Boolean, reflect: true })\n  hidden!: boolean;\n\n  @property({ type: String, reflect: true })\n  overlay!: string;\n\n  @property({ type: String, reflect: true })\n  rounded!: constants.TypeRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  filled!: boolean;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  private handleTransitionEnd = () => {\n    if (!this.opened) {\n      this.hidden = true;\n    }\n  };\n\n  private handleAnimationEnd = () => {\n    this.reveal = false;\n  };\n\n  shouldUpdate(prevProps: Map<string, never>) {\n    if (prevProps.has('opened') && !prevProps.get('opened')) {\n      this.hidden = false;\n      this.reveal = true;\n    }\n\n    return true;\n  }\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-alert-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n    this.handleMotion();\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-opened', this);\n    } else {\n      emitEvent(this, 'kemet-closed', this);\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"icon\"></slot>\n      <div part=\"message\">\n        <slot></slot>\n      </div>\n      <div class=\"close\" part=\"close\">\n        ${this.makeCloseBtn()}\n      </div>\n    `;\n  }\n\n  private makeCloseBtn() {\n    if (this.closable) {\n      return html`<kemet-icon-bootstrap icon=\"x-lg\" @click=${() => { this.opened = false; }}></kemet-icon-bootstrap>`;\n    }\n\n    return null;\n  }\n\n  private handleMotion() {\n    this.addEventListener('transitionend', this.handleTransitionEnd);\n    this.addEventListener('animationend', this.handleAnimationEnd);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('transitionend', this.handleTransitionEnd);\n    this.removeEventListener('animationend', this.handleAnimationEnd);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-alert': KemetAlert\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n    /* public */\n    --kemet-alert-align-items: center;\n    --kemet-alert-padding: 1rem;\n    --kemet-alert-border-thickness: 4px;\n\n    /* private */\n    --_kemet-alert-appearance-color: var(--kemet-color-font-base);\n    --_kemet-alert-border: 1px solid;\n    --_kemet-alert-radius: 0;\n    --_kemet-alert-color: inherit;\n    --_kemet-alert-background-color: transparent;\n\n    color: var(--_kemet-alert-color);\n    display: flex;\n    grid-template-columns: auto 1fr auto;\n    gap: var(--kemet-alert-padding);\n    align-items: var(--kemet-alert-align-items);\n    opacity: 0;\n    padding: var(--kemet-alert-padding);\n    border: var(--_kemet-alert-border);\n    transition: opacity 300ms ease;\n    border-radius: var(--_kemet-alert-radius);\n    background-color: var(--_kemet-alert-background-color);\n  }\n\n  :host([polarity=dark]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-font-inverse-base);\n  }\n\n  :host([opened]) {\n    opacity: 1;\n  }\n\n  :host([filled]) {\n    --_kemet-alert-border: 2px solid var(--kemet-color-font-inverse-base);\n    --_kemet-alert-color: var(--kemet-color-font-inverse-base);\n    --_kemet-alert-background-color: var(--_kemet-alert-appearance-color);\n    --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);\n  }\n\n  :host([filled][appearance=brand]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);\n  }\n\n  :host([filled][appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([filled][appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([filled][appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([filled][appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([filled][appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([appearance]) {\n    border-color: var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"top\"]) {\n    border-top: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"right\"]) {\n    border-right: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"bottom\"]) {\n    border-bottom: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"left\"]) {\n    border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([appearance=brand]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);\n  }\n\n  :host([appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([reveal]) {\n    animation: fadeIn 300ms ease forwards;\n  }\n\n  :host([overlay]) {\n    position: fixed;\n  }\n\n  :host([overlay*=\"full\"]) {\n    width: 100%;\n  }\n\n  :host([overlay*=\"top\"]) {\n    top: 0;\n  }\n\n  :host([overlay*=\"bottom\"]) {\n    bottom: 0;\n  }\n\n  :host([overlay*=\"left\"]) {\n    left: 0;\n  }\n\n  :host([overlay*=\"right\"]) {\n    right: 0;\n  }\n\n  :host([rounded]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"sm\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=\"md\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"lg\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=\"xl\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=\"circle\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=\"pill\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-pill);\n  }\n\n  [part=message] {\n    display: flex;\n    gap: 0.75rem;\n    align-items: center;\n  }\n\n  .close {\n    cursor: pointer;\n    margin-left: auto;\n  }\n\n  :host(:not([filled])) ::slotted(kemet-icon) {\n    color: var(--_kemet-alert-appearance-color);\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n"],"mappings":"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","names":["EnumOverlayPositions","EnumBorderAppearances"]}

package/dist/elements/alert/styles.css.js

@@ -41,8 +41,8 @@ var styles_css_default = css`:host {
     --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);
   }
 
-  :host([filled][appearance="brand"]) {
-    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);
+  :host([filled][appearance=brand]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);
   }
 
   :host([filled][appearance="success"]) {
@@ -85,8 +85,8 @@ var styles_css_default = css`:host {
     border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);
   }
 
-  :host([appearance="brand"]) {
-    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);
+  :host([appearance=brand]) {
+    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);
   }
 
   :host([appearance="success"]) {

package/dist/elements/alert/styles.css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/alert/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n    /* public */\n    --kemet-alert-align-items: center;\n    --kemet-alert-padding: 1rem;\n    --kemet-alert-border-thickness: 4px;\n\n    /* private */\n    --_kemet-alert-appearance-color: var(--kemet-color-font-base);\n    --_kemet-alert-border: 1px solid;\n    --_kemet-alert-radius: 0;\n    --_kemet-alert-color: inherit;\n    --_kemet-alert-background-color: transparent;\n\n    color: var(--_kemet-alert-color);\n    display: flex;\n    grid-template-columns: auto 1fr auto;\n    gap: var(--kemet-alert-padding);\n    align-items: var(--kemet-alert-align-items);\n    opacity: 0;\n    padding: var(--kemet-alert-padding);\n    border: var(--_kemet-alert-border);\n    transition: opacity 300ms ease;\n    border-radius: var(--_kemet-alert-radius);\n    background-color: var(--_kemet-alert-background-color);\n  }\n\n  :host([polarity=dark]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-font-inverse-base);\n  }\n\n  :host([opened]) {\n    opacity: 1;\n  }\n\n  :host([filled]) {\n    --_kemet-alert-border: 2px solid var(--kemet-color-font-inverse-base);\n    --_kemet-alert-color: var(--kemet-color-font-inverse-base);\n    --_kemet-alert-background-color: var(--_kemet-alert-appearance-color);\n    --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);\n  }\n\n  :host([filled][appearance=\"brand\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);\n  }\n\n  :host([filled][appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([filled][appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([filled][appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([filled][appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([filled][appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([appearance]) {\n    border-color: var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"top\"]) {\n    border-top: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"right\"]) {\n    border-right: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"bottom\"]) {\n    border-bottom: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"left\"]) {\n    border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([appearance=\"brand\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);\n  }\n\n  :host([appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([reveal]) {\n    animation: fadeIn 300ms ease forwards;\n  }\n\n  :host([overlay]) {\n    position: fixed;\n  }\n\n  :host([overlay*=\"full\"]) {\n    width: 100%;\n  }\n\n  :host([overlay*=\"top\"]) {\n    top: 0;\n  }\n\n  :host([overlay*=\"bottom\"]) {\n    bottom: 0;\n  }\n\n  :host([overlay*=\"left\"]) {\n    left: 0;\n  }\n\n  :host([overlay*=\"right\"]) {\n    right: 0;\n  }\n\n  :host([rounded]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"sm\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=\"md\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"lg\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=\"xl\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=\"circle\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=\"pill\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-pill);\n  }\n\n  [part=message] {\n    display: flex;\n    gap: 0.75rem;\n    align-items: center;\n  }\n\n  .close {\n    cursor: pointer;\n    margin-left: auto;\n  }\n\n  :host(:not([filled])) ::slotted(kemet-icon) {\n    color: var(--_kemet-alert-appearance-color);\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/elements/alert/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n    /* public */\n    --kemet-alert-align-items: center;\n    --kemet-alert-padding: 1rem;\n    --kemet-alert-border-thickness: 4px;\n\n    /* private */\n    --_kemet-alert-appearance-color: var(--kemet-color-font-base);\n    --_kemet-alert-border: 1px solid;\n    --_kemet-alert-radius: 0;\n    --_kemet-alert-color: inherit;\n    --_kemet-alert-background-color: transparent;\n\n    color: var(--_kemet-alert-color);\n    display: flex;\n    grid-template-columns: auto 1fr auto;\n    gap: var(--kemet-alert-padding);\n    align-items: var(--kemet-alert-align-items);\n    opacity: 0;\n    padding: var(--kemet-alert-padding);\n    border: var(--_kemet-alert-border);\n    transition: opacity 300ms ease;\n    border-radius: var(--_kemet-alert-radius);\n    background-color: var(--_kemet-alert-background-color);\n  }\n\n  :host([polarity=dark]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-font-inverse-base);\n  }\n\n  :host([opened]) {\n    opacity: 1;\n  }\n\n  :host([filled]) {\n    --_kemet-alert-border: 2px solid var(--kemet-color-font-inverse-base);\n    --_kemet-alert-color: var(--kemet-color-font-inverse-base);\n    --_kemet-alert-background-color: var(--_kemet-alert-appearance-color);\n    --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);\n  }\n\n  :host([filled][appearance=brand]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);\n  }\n\n  :host([filled][appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([filled][appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([filled][appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([filled][appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([filled][appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([appearance]) {\n    border-color: var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"top\"]) {\n    border-top: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"right\"]) {\n    border-right: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"bottom\"]) {\n    border-bottom: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([border-appearance=\"left\"]) {\n    border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n  }\n\n  :host([appearance=brand]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);\n  }\n\n  :host([appearance=\"success\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n  }\n\n  :host([appearance=\"warning\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n  }\n\n  :host([appearance=\"error\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n  }\n\n  :host([appearance=\"info\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n  }\n\n  :host([appearance=\"link\"]) {\n    --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([reveal]) {\n    animation: fadeIn 300ms ease forwards;\n  }\n\n  :host([overlay]) {\n    position: fixed;\n  }\n\n  :host([overlay*=\"full\"]) {\n    width: 100%;\n  }\n\n  :host([overlay*=\"top\"]) {\n    top: 0;\n  }\n\n  :host([overlay*=\"bottom\"]) {\n    bottom: 0;\n  }\n\n  :host([overlay*=\"left\"]) {\n    left: 0;\n  }\n\n  :host([overlay*=\"right\"]) {\n    right: 0;\n  }\n\n  :host([rounded]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"sm\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=\"md\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"lg\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=\"xl\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=\"circle\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=\"pill\"]) {\n    --_kemet-alert-radius: var(--kemet-border-radius-pill);\n  }\n\n  [part=message] {\n    display: flex;\n    gap: 0.75rem;\n    align-items: center;\n  }\n\n  .close {\n    cursor: pointer;\n    margin-left: auto;\n  }\n\n  :host(:not([filled])) ::slotted(kemet-icon) {\n    color: var(--_kemet-alert-appearance-color);\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/avatar/index.d.ts

@@ -1,7 +1,7 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
-import { d as TypeRoundedSizes } from '../../constants-Dj9X-JwG.js';
+import { d as TypeRoundedSizes } from '../../constants-BsAfWV-a.js';
 import '../../form-controller-3q581XcZ.js';
 
 /**

package/dist/elements/avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/avatar/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/avatar/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport { type TypeRoundedSizes } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-avatar\n * @summary A representation of a person or thing.\n * @ssrsafe yes\n *\n * @prop {string} size - The size in pixels.\n * @prop {string} image - Url to an image.\n * @prop {string} label - Labels the avatar.\n * @prop {string} initials - Initials of the user.\n * @prop {boolean} circle - Displays in a circle.\n * @prop {TypeRoundedSizes} rounded - Displays with rounded corners\n *\n * @slot status - A slot for an icon or element that indicates the status of the avatar.\n *\n * @csspart initials - Contains the initials for the avatar.\n *\n * @cssproperty --kemet-avatar-initials-margin - The space around the initials.\n *\n * @fires kemet-avatar-mounted - Fires when the avatar is mounted.\n * @detail {element: HTMLElement} - The avatar element.\n */\n\n@customElement('kemet-avatar')\nexport default class KemetAvatar extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  size!: string;\n\n  @property({ type: String })\n  image!: string;\n\n  @property({ type: String })\n  label!: string;\n\n  @property({ type: String })\n  initials!: string;\n\n  @property({ type: String, reflect: true })\n  rounded!: TypeRoundedSizes;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-avatar-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n    this.makeSize();\n  }\n\n  render() {\n    return html`\n      ${this.makeContent()}\n      <slot name=\"status\"></slot>\n    `;\n  }\n\n  makeSize() {\n    if (this.size) {\n      this.style.width = `${this.size}px`;\n      this.style.height = `${this.size}px`;\n    }\n  }\n\n  makeContent() {\n    if (this.image) {\n      return html`<img part=\"avatar-image\" src=${this.image} alt=${this.label} />`;\n    }\n\n    if (this.initials) {\n      return html`<div part=\"initials\" class=\"initials\">${this.initials}</div>`;\n    }\n\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-avatar': KemetAvatar\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  /* public */\n  --kemet-avatar-initials-margin: 1rem;\n\n  /* private */\n  --_kemet-avatar-color: var(--kemet-color-font-inverse-base);\n  --_kemet-avatar-background-color: var(--kemet-color-background-avatar-primary-base);\n  --_kemet-avatar-rounded: 0;\n\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--_kemet-avatar-color);\n  position: relative;\n  border-radius: var(--_kemet-avatar-rounded);\n  background-color: var(--_kemet-avatar-background-color);\n}\n\n:host > * {\n  border-radius: var(--_kemet-avatar-rounded);\n}\n\n:host([rounded]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-pill);\n}\n\n.initials {\n  margin: var(--kemet-avatar-initials-margin);\n}\n\n::slotted(kemet-badge) {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  border-radius: var(--kemet-border-radius-circle);\n}\n`;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;;;ACA5C,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ACXC,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;ACJA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AH+Bf,IAAqB,cAArB,cAAyC,WAAW;AAAA,EAApD;AAAA;AAsBE,eAAc;AAAA;AAAA,EAEd,eAAe;AACb,cAAU,MAAM,wBAAwB;AAAA,MACtC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AACX,SAAK,SAAS;AAAA,EAChB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH,KAAK,YAAY,CAAC;AAAA;AAAA;AAAA,EAGxB;AAAA,EAEA,WAAW;AACT,QAAI,KAAK,MAAM;AACb,WAAK,MAAM,QAAQ,GAAG,KAAK,IAAI;AAC/B,WAAK,MAAM,SAAS,GAAG,KAAK,IAAI;AAAA,IAClC;AAAA,EACF;AAAA,EAEA,cAAc;AACZ,QAAI,KAAK,OAAO;AACd,aAAO,oCAAoC,KAAK,KAAK,QAAQ,KAAK,KAAK;AAAA,IACzE;AAEA,QAAI,KAAK,UAAU;AACjB,aAAO,6CAA6C,KAAK,QAAQ;AAAA,IACnE;AAEA,WAAO;AAAA,EACT;AACF;AA7DqB,YACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,YAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,YAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,YAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,YAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,YAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlBtB,YAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GArBtB,YAsBnB;AAtBmB,cAArB;AAAA,EADC,cAAc,cAAc;AAAA,GACR;","names":[]}
+{"version":3,"sources":["../../../src/elements/avatar/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/avatar/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport { type TypeRoundedSizes } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-avatar\n * @summary A representation of a person or thing.\n * @ssrsafe yes\n *\n * @prop {string} size - The size in pixels.\n * @prop {string} image - Url to an image.\n * @prop {string} label - Labels the avatar.\n * @prop {string} initials - Initials of the user.\n * @prop {boolean} circle - Displays in a circle.\n * @prop {TypeRoundedSizes} rounded - Displays with rounded corners\n *\n * @slot status - A slot for an icon or element that indicates the status of the avatar.\n *\n * @csspart initials - Contains the initials for the avatar.\n *\n * @cssproperty --kemet-avatar-initials-margin - The space around the initials.\n *\n * @fires kemet-avatar-mounted - Fires when the avatar is mounted.\n * @detail {element: HTMLElement} - The avatar element.\n */\n\n@customElement('kemet-avatar')\nexport default class KemetAvatar extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  size!: string;\n\n  @property({ type: String })\n  image!: string;\n\n  @property({ type: String })\n  label!: string;\n\n  @property({ type: String })\n  initials!: string;\n\n  @property({ type: String, reflect: true })\n  rounded!: TypeRoundedSizes;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-avatar-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n    this.makeSize();\n  }\n\n  render() {\n    return html`\n      ${this.makeContent()}\n      <slot name=\"status\"></slot>\n    `;\n  }\n\n  makeSize() {\n    if (this.size) {\n      this.style.width = `${this.size}px`;\n      this.style.height = `${this.size}px`;\n    }\n  }\n\n  makeContent() {\n    if (this.image) {\n      return html`<img part=\"avatar-image\" src=${this.image} alt=${this.label} />`;\n    }\n\n    if (this.initials) {\n      return html`<div part=\"initials\" class=\"initials\">${this.initials}</div>`;\n    }\n\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-avatar': KemetAvatar\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  /* public */\n  --kemet-avatar-initials-margin: 1rem;\n\n  /* private */\n  --_kemet-avatar-color: var(--kemet-color-font-inverse-base);\n  --_kemet-avatar-background-color: var(--kemet-color-background-avatar-primary-base);\n  --_kemet-avatar-rounded: 0;\n\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--_kemet-avatar-color);\n  position: relative;\n  border-radius: var(--_kemet-avatar-rounded);\n  background-color: var(--_kemet-avatar-background-color);\n}\n\n:host > * {\n  border-radius: var(--_kemet-avatar-rounded);\n}\n\n:host([rounded]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  --_kemet-avatar-rounded: var(--kemet-border-radius-pill);\n}\n\n.initials {\n  margin: var(--kemet-avatar-initials-margin);\n}\n\n::slotted(kemet-badge) {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  border-radius: var(--kemet-border-radius-circle);\n}\n`;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;;;ACA5C,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ACXC,IAAM,YAAY,CAAC,SAAsB,MAAc,QAAa,UAAU,MAAM,WAAW,SAAS;AAC7G,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;ACJA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AH+Bf,IAAqB,cAArB,cAAyC,WAAW;AAAA,EAApD;AAAA;AAsBE,eAAc;AAAA;AAAA,EAEd,eAAe;AACb,cAAU,MAAM,wBAAwB;AAAA,MACtC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AACX,SAAK,SAAS;AAAA,EAChB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH,KAAK,YAAY,CAAC;AAAA;AAAA;AAAA,EAGxB;AAAA,EAEA,WAAW;AACT,QAAI,KAAK,MAAM;AACb,WAAK,MAAM,QAAQ,GAAG,KAAK,IAAI;AAC/B,WAAK,MAAM,SAAS,GAAG,KAAK,IAAI;AAAA,IAClC;AAAA,EACF;AAAA,EAEA,cAAc;AACZ,QAAI,KAAK,OAAO;AACd,aAAO,oCAAoC,KAAK,KAAK,QAAQ,KAAK,KAAK;AAAA,IACzE;AAEA,QAAI,KAAK,UAAU;AACjB,aAAO,6CAA6C,KAAK,QAAQ;AAAA,IACnE;AAEA,WAAO;AAAA,EACT;AACF;AA7DqB,YACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,YAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,YAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,YAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,YAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,YAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlBtB,YAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GArBtB,YAsBnB;AAtBmB,cAArB;AAAA,EADC,cAAc,cAAc;AAAA,GACR;","names":[]}

package/dist/elements/avatars/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/avatars/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/avatars/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-avatars\n * @summary Groups multiple avatar elements.\n * @ssrsafe yes\n *\n * @cssproperty --kemet-avatars-squeeze - The space between avatars. Default: -1.5rem.\n *\n * @fires kemet-avatars-mounted - Fires when the avatars are mounted.\n * @detail {element: HTMLElement} - The avatars element.\n */\n\n@customElement('kemet-avatars')\nexport default class KemetAvatars extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-avatars-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-avatars': KemetAvatars\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  --kemet-avatars-squeeze: -1.5rem;\n\n  display: inline-flex;\n}\n\n::slotted(kemet-avatar:not(:first-of-type)) {\n  margin-left: var(--kemet-avatars-squeeze);\n}\n`;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;;;ACA5C,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ACXN,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACFR,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;AHgBA,IAAqB,eAArB,cAA0C,WAAW;AAAA,EAArD;AAAA;AAOE,eAAc;AAAA;AAAA,EAEd,eAAe;AACb,cAAU,MAAM,yBAAyB;AAAA,MACvC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AACF;AAvBqB,aACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAHtB,aAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GANtB,aAOnB;AAPmB,eAArB;AAAA,EADC,cAAc,eAAe;AAAA,GACT;","names":[]}
+{"version":3,"sources":["../../../src/elements/avatars/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/avatars/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-avatars\n * @summary Groups multiple avatar elements.\n * @ssrsafe yes\n *\n * @cssproperty --kemet-avatars-squeeze - The space between avatars. Default: -1.5rem.\n *\n * @fires kemet-avatars-mounted - Fires when the avatars are mounted.\n * @detail {element: HTMLElement} - The avatars element.\n */\n\n@customElement('kemet-avatars')\nexport default class KemetAvatars extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-avatars-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-avatars': KemetAvatars\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  --kemet-avatars-squeeze: -1.5rem;\n\n  display: inline-flex;\n}\n\n::slotted(kemet-avatar:not(:first-of-type)) {\n  margin-left: var(--kemet-avatars-squeeze);\n}\n`;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;;;ACA5C,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ACXN,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACFR,IAAM,YAAY,CAAC,SAAsB,MAAc,QAAa,UAAU,MAAM,WAAW,SAAS;AAC7G,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;AHgBA,IAAqB,eAArB,cAA0C,WAAW;AAAA,EAArD;AAAA;AAOE,eAAc;AAAA;AAAA,EAEd,eAAe;AACb,cAAU,MAAM,yBAAyB;AAAA,MACvC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AACF;AAvBqB,aACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAHtB,aAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GANtB,aAOnB;AAPmB,eAArB;AAAA,EADC,cAAc,eAAe;AAAA,GACT;","names":[]}

package/dist/elements/badge/index.d.ts

@@ -1,7 +1,7 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
-import { e as EnumAppearances, E as EnumRoundedSizes } from '../../constants-Dj9X-JwG.js';
+import { E as EnumAppearances, e as EnumRoundedSizes } from '../../constants-BsAfWV-a.js';
 import '../../form-controller-3q581XcZ.js';
 
 /**

package/dist/elements/badge/index.js

@@ -59,7 +59,7 @@ var styles_css_default = css`:host {
 }
 
 :host([appearance=brand]) {
-  --_kemet-badge-color: var(--kemet-color-brand-primary-base);
+  --_kemet-badge-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=success]) {

package/dist/elements/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/badge/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/badge/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { EnumRoundedSizes, EnumAppearances } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-badge\n * @summary Badges display the status of information.\n * @ssrsafe yes\n *\n * @prop {TypeStatus} status - The status of the badge\n * @prop {number} circlePadding - Padding on the badge as a circle\n * @prop {TypeRoundedSizes} rounded - Rounds the corners on the badge\n * @prop {boolean} outlined - Outlines the badge\n * @prop {EnumAppearance} appearance - The appearance of the badge's color\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @fires kemet-badge-mounted - Fires when the badge is mounted\n * @detail {HTMLElement} element - The badge element\n *\n * @cssproperty --kemet-badge-padding - The padding of the badge.\n * @cssproperty --kemet-badge-border-width - The border width of the badge.\n * @cssproperty --kemet-badge-border-style - The border style of the badge.\n *\n */\n\n@customElement('kemet-badge')\nexport default class KemetBadge extends LitElement {\n  static styles = [styles];\n\n  @property({ reflect: true })\n  appearance!: EnumAppearances;\n\n  @property({ type: Number, attribute: 'circle-padding' })\n  circlePadding: number = 0;\n\n  @property({ type: String, reflect: true })\n  rounded!: EnumRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  outlined: boolean = false;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  iconLeft: boolean = false;\n\n  @state()\n  iconRight: boolean = false;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-badge-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`\n      <slot name=\"left\" @slotchange=${() => this.handleLeftChange()}></slot>\n      ${this.iconLeft ? html`&nbsp;` : ''}\n      <slot @slotchange=${() => this.handleSlotChange()}></slot>\n      ${this.iconRight ? html`&nbsp;` : ''}\n      <slot name=\"right\" @slotchange=${() => this.handleRightChange()}></slot>\n    `;\n  }\n\n  handleSlotChange() {\n    if (this.rounded === EnumRoundedSizes.Circle) {\n      this.style.height = `${this.offsetWidth + this.circlePadding}px`;\n      this.style.width = `${this.offsetWidth + this.circlePadding}px`;\n    }\n  }\n\n  handleLeftChange() {\n    const left = this.querySelector('[slot=\"left\"]');\n    if (left) this.iconLeft = true;\n  }\n\n  handleRightChange() {\n    const right = this.querySelector('[slot=\"right\"]');\n    if (right) this.iconRight = true;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-badge': KemetBadge\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-badge-padding: 10px;\n  --kemet-badge-border-width: 1px;\n  --kemet-badge-border-style: solid;\n\n  /* private */\n  --_kemet-badge-background-color: var(--_kemet-badge-color);\n  --_kemet-badge-border: 0;\n  --_kemet-badge-border-color: var(--_kemet-badge-color);\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-badge-color: var(--kemet-color-background-badge-primary-base);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--kemet-badge-padding);\n  line-height: 1;\n  color: var(--_kemet-badge-font-color);\n  background-color: var(--_kemet-badge-background-color);\n  border: var(--_kemet-badge-border);\n}\n\n:host([polarity=dark]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-base);\n  --_kemet-badge-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]) {\n  --_kemet-badge-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=success]) {\n  --_kemet-badge-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --_kemet-badge-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]) {\n  --_kemet-badge-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]) {\n  --_kemet-badge-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --_kemet-badge-color: var(--kemet-color-background-link);\n}\n\n\n:host([rounded]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([outlined]) {\n  --_kemet-badge-font-color: var(--_kemet-badge-color);\n  --_kemet-badge-background-color: transparent;\n  --_kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--_kemet-badge-color);\n}\n\n`;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/badge/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/badge/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { EnumRoundedSizes, EnumAppearances } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-badge\n * @summary Badges display the status of information.\n * @ssrsafe yes\n *\n * @prop {TypeStatus} status - The status of the badge\n * @prop {number} circlePadding - Padding on the badge as a circle\n * @prop {TypeRoundedSizes} rounded - Rounds the corners on the badge\n * @prop {boolean} outlined - Outlines the badge\n * @prop {EnumAppearance} appearance - The appearance of the badge's color\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @fires kemet-badge-mounted - Fires when the badge is mounted\n * @detail {HTMLElement} element - The badge element\n *\n * @cssproperty --kemet-badge-padding - The padding of the badge.\n * @cssproperty --kemet-badge-border-width - The border width of the badge.\n * @cssproperty --kemet-badge-border-style - The border style of the badge.\n *\n */\n\n@customElement('kemet-badge')\nexport default class KemetBadge extends LitElement {\n  static styles = [styles];\n\n  @property({ reflect: true })\n  appearance!: EnumAppearances;\n\n  @property({ type: Number, attribute: 'circle-padding' })\n  circlePadding: number = 0;\n\n  @property({ type: String, reflect: true })\n  rounded!: EnumRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  outlined: boolean = false;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  iconLeft: boolean = false;\n\n  @state()\n  iconRight: boolean = false;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-badge-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`\n      <slot name=\"left\" @slotchange=${() => this.handleLeftChange()}></slot>\n      ${this.iconLeft ? html`&nbsp;` : ''}\n      <slot @slotchange=${() => this.handleSlotChange()}></slot>\n      ${this.iconRight ? html`&nbsp;` : ''}\n      <slot name=\"right\" @slotchange=${() => this.handleRightChange()}></slot>\n    `;\n  }\n\n  handleSlotChange() {\n    if (this.rounded === EnumRoundedSizes.Circle) {\n      this.style.height = `${this.offsetWidth + this.circlePadding}px`;\n      this.style.width = `${this.offsetWidth + this.circlePadding}px`;\n    }\n  }\n\n  handleLeftChange() {\n    const left = this.querySelector('[slot=\"left\"]');\n    if (left) this.iconLeft = true;\n  }\n\n  handleRightChange() {\n    const right = this.querySelector('[slot=\"right\"]');\n    if (right) this.iconRight = true;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-badge': KemetBadge\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-badge-padding: 10px;\n  --kemet-badge-border-width: 1px;\n  --kemet-badge-border-style: solid;\n\n  /* private */\n  --_kemet-badge-background-color: var(--_kemet-badge-color);\n  --_kemet-badge-border: 0;\n  --_kemet-badge-border-color: var(--_kemet-badge-color);\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-badge-color: var(--kemet-color-background-badge-primary-base);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--kemet-badge-padding);\n  line-height: 1;\n  color: var(--_kemet-badge-font-color);\n  background-color: var(--_kemet-badge-background-color);\n  border: var(--_kemet-badge-border);\n}\n\n:host([polarity=dark]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-base);\n  --_kemet-badge-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]) {\n  --_kemet-badge-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=success]) {\n  --_kemet-badge-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --_kemet-badge-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]) {\n  --_kemet-badge-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]) {\n  --_kemet-badge-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --_kemet-badge-color: var(--kemet-color-background-link);\n}\n\n\n:host([rounded]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([outlined]) {\n  --_kemet-badge-font-color: var(--_kemet-badge-color);\n  --_kemet-badge-background-color: transparent;\n  --_kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--_kemet-badge-color);\n}\n\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/badge/styles.css.js

@@ -33,7 +33,7 @@ var styles_css_default = css`:host {
 }
 
 :host([appearance=brand]) {
-  --_kemet-badge-color: var(--kemet-color-brand-primary-base);
+  --_kemet-badge-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=success]) {

package/dist/elements/badge/styles.css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/badge/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-badge-padding: 10px;\n  --kemet-badge-border-width: 1px;\n  --kemet-badge-border-style: solid;\n\n  /* private */\n  --_kemet-badge-background-color: var(--_kemet-badge-color);\n  --_kemet-badge-border: 0;\n  --_kemet-badge-border-color: var(--_kemet-badge-color);\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-badge-color: var(--kemet-color-background-badge-primary-base);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--kemet-badge-padding);\n  line-height: 1;\n  color: var(--_kemet-badge-font-color);\n  background-color: var(--_kemet-badge-background-color);\n  border: var(--_kemet-badge-border);\n}\n\n:host([polarity=dark]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-base);\n  --_kemet-badge-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]) {\n  --_kemet-badge-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=success]) {\n  --_kemet-badge-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --_kemet-badge-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]) {\n  --_kemet-badge-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]) {\n  --_kemet-badge-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --_kemet-badge-color: var(--kemet-color-background-link);\n}\n\n\n:host([rounded]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([outlined]) {\n  --_kemet-badge-font-color: var(--_kemet-badge-color);\n  --_kemet-badge-background-color: transparent;\n  --_kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--_kemet-badge-color);\n}\n\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/elements/badge/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-badge-padding: 10px;\n  --kemet-badge-border-width: 1px;\n  --kemet-badge-border-style: solid;\n\n  /* private */\n  --_kemet-badge-background-color: var(--_kemet-badge-color);\n  --_kemet-badge-border: 0;\n  --_kemet-badge-border-color: var(--_kemet-badge-color);\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-badge-color: var(--kemet-color-background-badge-primary-base);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--kemet-badge-padding);\n  line-height: 1;\n  color: var(--_kemet-badge-font-color);\n  background-color: var(--_kemet-badge-background-color);\n  border: var(--_kemet-badge-border);\n}\n\n:host([polarity=dark]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-base);\n  --_kemet-badge-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance]) {\n  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]) {\n  --_kemet-badge-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=success]) {\n  --_kemet-badge-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n  --_kemet-badge-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]) {\n  --_kemet-badge-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]) {\n  --_kemet-badge-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n  --_kemet-badge-color: var(--kemet-color-background-link);\n}\n\n\n:host([rounded]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n  border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n  border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n  border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n  border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n  border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([outlined]) {\n  --_kemet-badge-font-color: var(--_kemet-badge-color);\n  --_kemet-badge-background-color: transparent;\n  --_kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--_kemet-badge-color);\n}\n\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/button/index.d.ts

@@ -1,7 +1,7 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
-import { d as TypeRoundedSizes, T as TypeAppearance } from '../../constants-Dj9X-JwG.js';
+import { d as TypeRoundedSizes, T as TypeAppearance } from '../../constants-BsAfWV-a.js';
 import '../../form-controller-3q581XcZ.js';
 
 declare enum EnumVariants {

package/dist/elements/button/index.js

@@ -133,7 +133,7 @@ var styles_css_default = css`:host {
 }
 
 :host([appearance=brand]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {
-  --_kemet-button-background-color: var(--kemet-color-brand-primary-base);
+  --_kemet-button-background-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([appearance=success]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {
@@ -158,7 +158,7 @@ var styles_css_default = css`:host {
 
 :host([variant=text][appearance=brand]:not([disabled])),
 :host([variant=plain][appearance=brand]:not([disabled])) {
-  --_kemet-button-font-color: var(--kemet-color-brand-primary-base);
+  --_kemet-button-font-color: var(--kemet-color-brand-primary-darker);
 }
 
 :host([variant=text][appearance=success]:not([disabled])),
@@ -223,9 +223,9 @@ var styles_css_default = css`:host {
 }
 
 :host([variant=outlined][appearance=brand]:not([disabled])) {
-  --_kemet-button-font-color: var(--kemet-color-brand-primary-base);
+  --_kemet-button-font-color: var(--kemet-color-brand-primary-darker);
   --_kemet-button-background-color: transparent;
-  --_kemet-button-border-color: var(--kemet-color-brand-primary-base);
+  --_kemet-button-border-color: var(--kemet-color-brand-primary-darker);
   --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);
 }