kemet-ui 4.0.2 → 5.0.0

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

@@ -0,0 +1,98 @@
+// src/elements/badge/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  /* public */
+  --kemet-badge-padding: 10px;
+  --kemet-badge-border-width: 1px;
+  --kemet-badge-border-style: solid;
+
+  /* private */
+  --_kemet-badge-background-color: var(--_kemet-badge-color);
+  --_kemet-badge-border: 0;
+  --_kemet-badge-border-color: var(--_kemet-badge-color);
+  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);
+  --_kemet-badge-color: var(--kemet-color-background-badge-primary-base);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--kemet-badge-padding);
+  line-height: 1;
+  color: var(--_kemet-badge-font-color);
+  background-color: var(--_kemet-badge-background-color);
+  border: var(--_kemet-badge-border);
+}
+
+:host([polarity=dark]) {
+  --_kemet-badge-font-color: var(--kemet-color-font-base);
+  --_kemet-badge-color: var(--kemet-color-font-inverse-base);
+}
+
+:host([appearance]) {
+  --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);
+}
+
+:host([appearance=brand]) {
+  --_kemet-badge-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=success]) {
+  --_kemet-badge-color: var(--kemet-color-background-success);
+}
+
+:host([appearance=warning]) {
+  --_kemet-badge-color: var(--kemet-color-background-warning);
+}
+
+:host([appearance=error]) {
+  --_kemet-badge-color: var(--kemet-color-background-error);
+}
+
+:host([appearance=info]) {
+  --_kemet-badge-color: var(--kemet-color-background-info);
+}
+
+:host([appearance=link]) {
+  --_kemet-badge-color: var(--kemet-color-background-link);
+}
+
+
+:host([rounded]) {
+  border-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=sm]) {
+  border-radius: var(--kemet-border-radius-sm);
+}
+
+:host([rounded=md]) {
+  border-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=lg]) {
+  border-radius: var(--kemet-border-radius-lg);
+}
+
+:host([rounded=xl]) {
+  border-radius: var(--kemet-border-radius-xl);
+}
+
+:host([rounded=circle]) {
+  border-radius: var(--kemet-border-radius-circle);
+}
+
+:host([rounded=pill]) {
+  border-radius: var(--kemet-border-radius-pill);
+}
+
+:host([outlined]) {
+  --_kemet-badge-font-color: var(--_kemet-badge-color);
+  --_kemet-badge-background-color: transparent;
+  --_kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--_kemet-badge-color);
+}
+
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,113 @@
+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-W9QKPlZP.js';
+import '../../form-controller-3q581XcZ.js';
+
+declare enum EnumVariants {
+    Standard = "standard",
+    Text = "text",
+    Outlined = "outlined",
+    Plain = "plain",
+    Edge = "edge"
+}
+declare enum EnumTargets {
+    Blank = "_blank",
+    Self = "_self",
+    Parent = "_parent",
+    Top = "_top"
+}
+declare enum EnumTypes {
+    Button = "button",
+    Submit = "submit",
+    Reset = "reset"
+}
+declare enum EnumSizes {
+    XSmall = "xs",
+    Small = "sm",
+    Medium = "md",
+    Large = "lg",
+    XLarge = "xl"
+}
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-button
+ * @summary A versatile button that can be used either to submit a form, trigger an action, or link to content.
+ *
+ * @prop {string} href - The url a button should link too
+ * @prop {boolean} outlined - Outline style for a button
+ * @prop {boolean} disabled - Determines whether not a button is disabled
+ * @prop {TypeVariants} variant - Controls the type of button.
+ * @prop {TypeTargets} target - The target attribute for a link
+ * @prop {TypeTypes} type - The type attribute for a button
+ * @prop {TypeRoundedSizes} rounded - The border radius of the button
+ * @prop {EnumSizes} size - The size of the button
+ * @prop {boolean} loading - Determines if the button is in a loading state
+ * @prop {EnumAppearance} appearance - The appearance of the button's color
+ * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
+ * @prop {string} dom - The status of dom initalization.
+ *
+ * @slot left - Allows you to place an icon to the left of the button text.
+ * @slot right - Allows you to place an icon to the right of the button text.
+ *
+ * @csspart button - The button or anchor element.
+ *
+ * @cssproperty --kemet-button-hover-brightness - The brightness of the hover state.
+ * @cssproperty --kemet-button-active-brightness - The brightness of the active state.
+ * @cssproperty --kemet-button-circle-size - The diameter of a circle button.
+ * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect.
+ * @cssproperty --kemet-button-gap - The gap between the button and icons.
+ * @cssproperty --kemet-button-border-width - The width of the outline border.
+ * @cssproperty --kemet-button-border-style - The style of the outline border.
+ *
+ * @fires kemet-button-mounted - Fired when the button is mounted to the DOM
+ * @detail {HTMLElement} element - The button element
+ */
+declare class KemetButton extends LitElement {
+    static styles: lit.CSSResult[];
+    href: string;
+    disabled: boolean;
+    variant: EnumVariants;
+    target: EnumTargets;
+    type: EnumTypes;
+    iconLeft: boolean;
+    iconRight: boolean;
+    iconButton: boolean;
+    rounded: TypeRoundedSizes;
+    loading: boolean;
+    appearance: TypeAppearance;
+    size: EnumSizes;
+    polarity?: 'light' | 'dark';
+    dom: string;
+    internalButton: HTMLButtonElement;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    private handleLeftChange;
+    private handleRightChange;
+    private handleIconButtonChange;
+    private makeLightDOMButton;
+    private handleClick;
+    /**
+     * Triggers a click event on the button element.
+     * @method click
+     * @public
+     * @returns {void}
+     */
+    click(): void;
+    /**
+     * Triggers a blur on the button element.
+     * @method blur
+     * @public
+     * @returns {void}
+     */
+    blur(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-button': KemetButton;
+    }
+}
+
+export { EnumSizes, EnumTargets, EnumTypes, EnumVariants, KemetButton as default };