@statistikzh/leu 0.24.2 → 0.25.0

package/dist/Accordion.js

@@ -1,250 +1,3 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { css, nothing } from 'lit';
-import { unsafeStatic, html } from 'lit/static-html.js';
-import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
-
-var css_248z = css`:host {
-  --accordion-font-regular: var(--leu-font-family-regular);
-  --accordion-font-black: var(--leu-font-family-black);
-
-  --accordion-toggle-font: var(--accordion-font-black);
-
-  --label-color: var(--leu-color-black-60);
-  --label-color-active: var(--leu-color-black-100);
-
-  --divider-color: var(--leu-color-black-20);
-  --divider-color-active: var(--leu-color-black-100);
-
-  --transition: 0.1s ease;
-
-  font-family: var(--accordion-font-regular);
-
-  position: relative;
-}
-.heading {
-  margin: 0;
-}
-.button {
-  width: 100%;
-  background: none;
-  padding: 1rem 0;
-  margin: 0;
-  cursor: pointer;
-
-  border: none;
-
-  color: var(--label-color);
-  font-family: var(--accordion-toggle-font);
-  font-size: 1rem;
-  line-height: 1.5rem;
-  text-align: left;
-
-  display: flex;
-  gap: 0.25rem;
-
-  transition: color var(--transition);
-}
-@media (min-width: 600px) {
-.button {
-    font-size: 1.125rem;
-    gap: 0.8rem;
-}
-  }
-@media (min-width: 1280px) {
-.button {
-    font-size: 1.25rem;
-    line-height: 1.625rem;
-}
-  }
-.button:focus-visible {
-  outline: 2px solid var(--leu-color-func-cyan);
-  outline-offset: 4px;
-}
-.button:hover,
-.button:focus-visible,
-:host([open]) .button {
-  color: var(--label-color-active);
-}
-.plus {
-  position: relative;
-  flex: 0 0 1rem;
-  aspect-ratio: 1;
-  align-self: center;
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
-.plus::before,
-.plus::after {
-  content: "";
-
-  position: absolute;
-  top: calc(50% - 0.0625rem);
-  left: 0;
-
-  display: block;
-  width: 1rem;
-  height: 0.125rem;
-  aspect-ratio: 1 / 0.125;
-  background-color: currentcolor;
-  transition: transform var(--transition);
-}
-.plus::before {
-  transform: rotate(90deg);
-}
-:host([open]) .plus::before {
-  transform: rotate(180deg);
-}
-.label {
-  display: block;
-  flex-grow: 1;
-}
-.contentwrapper {
-  display: grid;
-  grid-template-rows: 1fr;
-  transition: grid-template-rows var(--transition);
-}
-.content {
-  overflow: hidden;
-}
-.contentwrapper[hidden] {
-  grid-template-rows: 0fr;
-  opacity: 0;
-  visibility: hidden;
-}
-slot[name="content"] {
-  display: block;
-  padding: 0.5rem 0 1.5rem;
-}
-@media (min-width: 840px) {
-slot[name="content"] {
-    padding: 0.75rem 0 1.5rem;
-}
-  }
-@media (min-width: 1280px) {
-slot[name="content"] {
-    padding: 1rem 0 2.5rem;
-}
-  }
-.divider {
-  width: 100%;
-  height: 1px;
-  margin: 0;
-
-  border: none;
-  background-color: var(--divider-color);
-
-  transition:
-    transform var(--transition), background-color var(--transition);
-}
-:host(:not([open])) .heading:hover ~ .divider {
-  background-color: var(--divider-color-active);
-  transform: scaleY(3);
-}
-:host(:not([open])) .heading:focus-visible ~ .divider {
-  background-color: var(--divider-color-active);
-  transform: scaleY(3);
-}
-`;
-
-/**
- * @tagname leu-accordion
- * @slot content - The content of the accordion. No styles will be applied to the content.
- * @attr {number} heading-level - The heading level of the accordion title. Must be between 1 and 6.
- * @attr {string} label-prefix - The prefix of the accordion label. e.g. "01"
- */
-class LeuAccordion extends LeuElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The heading level of the accordion title. Must be between 1 and 6.
-         */
-        this.headingLevel = 2;
-        /**
-         * The expanded state of the accordion.
-         */
-        this.open = false;
-        /**
-         * The label (title) of the accordion
-         */
-        this.label = "";
-        /**
-         * The prefix of the accordion label. e.g. "01"
-         */
-        this.labelPrefix = "";
-        /* eslint-enable lit/binding-positions, lit/no-invalid-html */
-    }
-    /**
-     * Determines the heading tag of the accordion toggle.
-     * The headingLevel shouldn't be used directly to render the heading tag
-     * in order to avoid XSS issues.
-     * @internal
-     */
-    _getHeadingTag() {
-        let level = 2;
-        if (this.headingLevel > 0 && this.headingLevel < 7) {
-            level = Math.floor(this.headingLevel);
-        }
-        return `h${level}`;
-    }
-    /**
-     * Toggles the accordion open state.
-     * @internal
-     */
-    _handleToggleClick() {
-        this.open = !this.open;
-    }
-    render() {
-        const hTag = this._getHeadingTag();
-        /* The eslint rules don't recognize html import from lit/static-html.js */
-        /* eslint-disable lit/binding-positions, lit/no-invalid-html */
-        return html `<${unsafeStatic(hTag)} class="heading"><button
-        id="toggle"
-        type="button"
-        class="button"
-        aria-controls="contentwrapper"
-        aria-expanded="${this.open}"
-        @click=${this._handleToggleClick}
-      >
-        ${this.labelPrefix
-            ? html `<span class="label-prefix">${this.labelPrefix}</span>`
-            : nothing}
-        <span class="label">${this.label}</span>
-        <div class="plus"></div>
-      </button></${unsafeStatic(hTag)}>
-      <div
-        id="contentwrapper"
-        class="contentwrapper"
-        ?hidden=${!this.open}
-        aria-labelledby="toggle"
-        role="region"
-      >
-        <div
-          class="content"
-        >
-          <slot name="content"></slot>
-        </div>
-      </div>
-      <hr class="divider" />`;
-    }
-}
-LeuAccordion.styles = [LeuElement.styles, css_248z];
-/** @internal */
-LeuAccordion.shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-};
-__decorate([
-    property({ type: Number, attribute: "heading-level", reflect: true })
-], LeuAccordion.prototype, "headingLevel", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuAccordion.prototype, "open", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuAccordion.prototype, "label", void 0);
-__decorate([
-    property({ type: String, attribute: "label-prefix", reflect: true })
-], LeuAccordion.prototype, "labelPrefix", void 0);
-
+import "./LeuElement-B7NJzWwP.js";
+import { t as LeuAccordion } from "./Accordion-CDNyrB8d.js";
 export { LeuAccordion };

package/dist/Button-DSGPIcjm.d.ts

@@ -0,0 +1,93 @@
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as FormAssociatedMixinType } from "./FormAssociatedMixin-Cc74LjbC.js";
+import { t as LeuIcon } from "./Icon-Op80LrrO.js";
+import * as lit_html0 from "lit-html";
+
+//#region src/components/button/Button.d.ts
+declare const LeuButton_base: (abstract new (...args: any[]) => FormAssociatedMixinType) & typeof LeuElement;
+/**
+ * @tagname leu-button
+ * @slot before - The icon to display before the label
+ * @slot after - The icon to display after the label
+ * @slot - The label of the button or the icon if no label is set
+ * @see https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
+ */
+declare class LeuButton extends LeuButton_base {
+  static dependencies: {
+    "leu-icon": typeof LeuIcon;
+  };
+  static styles: any[];
+  static shadowRootOptions: {
+    delegatesFocus: boolean;
+    clonable?: boolean;
+    customElementRegistry?: CustomElementRegistry;
+    mode: ShadowRootMode;
+    serializable?: boolean;
+    slotAssignment?: SlotAssignmentMode;
+  };
+  private hasSlotController;
+  /**
+   * `aria-label` of the underlying button elements.
+   * Use it to provide a label when only an icon is visible.
+   */
+  label: null | string;
+  /**
+   * The size of the button.
+   */
+  size: "regular" | "small";
+  /**
+   * The visual variant of the button.
+   */
+  variant: "primary" | "secondary" | "ghost";
+  /**
+   * The `type` of the underlying button element.
+   */
+  type: "button" | "submit" | "reset";
+  /**
+   * The `role` of the underlying button element.
+   */
+  componentRole?: string;
+  /**
+   * Whether the button is disabled or not.
+   * @type {boolean}
+   */
+  disabled: boolean;
+  /**
+   * Whether the button should be round.
+   * Can only be applied when the button contains an icon without a visible label.
+   * @type {boolean}
+   */
+  round: boolean;
+  /**
+   * Whether the button is active or not.
+   * Depending on the `componentRole`, it applies `aria-checked` or `aria-selected` to the underlying button element.
+   */
+  active: boolean;
+  /**
+   * Wheter the colors should be inverted. For use on dark backgrounds.
+   */
+  inverted: boolean;
+  /**
+   * Whether the button is expanded or not.
+   * Only has an effect on the variant `ghost` to show an expanding icon.
+   * If the property is not set, the icon will not be shown.
+   * If it is set, the icon will either show an expanded or collapsed state.
+   */
+  expanded?: "true" | "false";
+  /**
+   * Alters the shape of the button to be full width of its parent container
+   */
+  fluid: boolean;
+  private button;
+  private renderExpandingIcon;
+  private getAriaAttributes;
+  private hasTextContent;
+  setFormValue(): void;
+  protected handleClick(e: PointerEvent): void;
+  click(): void;
+  focus(options?: FocusOptions): void;
+  blur(): void;
+  render(): lit_html0.TemplateResult<1>;
+}
+//#endregion
+export { LeuButton as t };