@supersoniks/concorde 4.8.0 → 4.9.0

package/dist/js/core/components/ui/form/css/form-control.js

@@ -0,0 +1,393 @@
+import { css } from "lit";
+export const passwordToggle = css `
+  .password-toggle {
+    color: var(--sc-input-c);
+    font-size: var(--sc-input-fs);
+    cursor: pointer;
+    margin-right: calc(-0.5 * var(--sc-input-px));
+  }
+
+  :host([inlineContent]) .has-suffix .password-toggle {
+    margin-right: 0;
+  }
+`;
+export const label = css `
+  :host {
+    --sc-label-fs: var(--sc-_fs, 1rem);
+    --sc-label-fw: var(--sc-label-font-weight, 500);
+  }
+  label {
+    font-size: var(--sc-label-fs);
+    font-weight: var(--sc-label-fw);
+    line-height: 1.2;
+  }
+  .form-label {
+    margin-bottom: 0.22em;
+    display: block;
+  }
+`;
+export const description = css `
+  .form-description {
+    color: var(--sc-base-400, var(--sc-base-content, #000));
+    font-size: 0.85em;
+    margin-top: 0.2em;
+    display: block;
+  }
+`;
+export const formControl = css `
+  * {
+    box-sizing: border-box;
+  }
+
+  :host {
+    --sc-input-height: var(--sc-form-height, 2.5em);
+    --sc-input-c: var(--sc-input-color, var(--sc-base-content, #000));
+    --sc-input-b-width: var(--sc-form-border-width);
+    --sc-input-b-color: var(
+      --sc-input-border-color,
+      var(--sc-base-content, #000)
+    );
+
+    --sc-item-rounded-tr: var(--sc-input-rounded);
+    --sc-item-rounded-tl: var(--sc-input-rounded);
+    --sc-item-rounded-bl: var(--sc-input-rounded);
+    --sc-item-rounded-br: var(--sc-input-rounded);
+
+    --sc-input-fs: var(--sc-_fs, 1rem);
+    --sc-input-ff: var(
+      --sc-input-font-family,
+      var(--sc-font-family-base, sans-serif)
+    );
+    --sc-input-py: 0.55em;
+    --sc-input-px: clamp(0.3em, 8%, 1.1em);
+
+    --sc-input-background: var(--sc-input-bg);
+    --sc-input-addon-c: var(--sc-input-addon-color, var(--sc-base, #fff));
+    --sc-input-addon-bg: var(--sc-input-c);
+  }
+
+  .form-element {
+    display: block;
+    flex-grow: 1;
+    width: 100%;
+
+    line-height: 1.1;
+    color: var(--sc-input-c);
+    border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr)
+      var(--sc-item-rounded-br) var(--sc-item-rounded-bl);
+
+    font-family: var(--sc-input-ff);
+    background-color: var(--sc-input-background);
+    border: var(--sc-input-b-width) solid
+      var(--sc-input-b-color, var(--sc-base-300, #aaa));
+    width: 100%;
+    font-size: var(--sc-input-fs);
+
+    padding-top: var(--sc-input-py);
+    padding-bottom: var(--sc-input-py);
+    padding-left: var(--sc-input-px);
+    padding-right: var(--sc-input-px);
+
+    transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out,
+      box-shadow 0.15s ease-in-out;
+    min-height: var(--sc-input-height);
+  }
+
+  .form-control {
+    display: flex;
+    width: 100%;
+  }
+
+  /*Suffix*/
+  :host(:not([inlineContent])) .has-suffix slot[name="suffix"],
+  :host(:not([inlineContent])) .has-prefix slot[name="prefix"] {
+    min-width: var(--sc-input-height);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1.1;
+    flex-shrink: 0;
+    border: var(--sc-input-b-width) solid transparent;
+    padding-left: clamp(0.25em, 3%, calc(0.33 * var(--sc-input-px)));
+    padding-right: clamp(0.25em, 3%, calc(0.33 * var(--sc-input-px)));
+  }
+
+  :host(:not([inlineContent])) slot[name="prefix"] {
+    border-radius: var(--sc-item-rounded-tl) 0 0 var(--sc-item-rounded-bl);
+    background-color: var(--sc-input-addon-bg);
+    color: var(--sc-input-addon-c);
+    /*margin-right: calc(-1 * var(--sc-input-b-width));
+    border: none;*/
+  }
+
+  :host(:not([inlineContent])) slot[name="suffix"] {
+    border-radius: 0 var(--sc-item-rounded-tr) var(--sc-item-rounded-br) 0;
+    background-color: var(--sc-input-addon-bg);
+    color: var(--sc-input-addon-c);
+    /*margin-left: calc(-1 * var(--sc-input-b-width));
+    border: none;*/
+  }
+
+  :host(:not([inlineContent])[disabled]) .has-suffix slot[name="suffix"],
+  :host(:not([inlineContent])[disabled]) .has-prefix slot[name="prefix"] {
+    opacity: 0.43;
+  }
+
+  :host(:not([inlineContent])) .has-prefix .form-element {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  :host(:not([inlineContent])) .has-suffix .form-element {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  slot[name="suffix"]::slotted(sonic-icon),
+  slot[name="prefix"]::slotted(sonic-icon) {
+    font-size: 1.2em;
+  }
+
+  /*InlineCONTENT */
+
+  .form-element > slot,
+  .form-element .form-element {
+    all: unset;
+  }
+
+  :host([inlineContent]) .form-element {
+    display: flex;
+    align-items: center;
+    gap: 0.35em;
+    min-height: var(--sc-form-height, 2.5em);
+  }
+
+  :host([inlineContent]) .form-element .form-element {
+    appearance: none;
+    background: transparent;
+    border: none;
+    padding: 0;
+    display: block;
+    width: 50%;
+    min-width: 0;
+    flex: 1 1 auto;
+    height: auto;
+    min-height: auto;
+    border-radius: 0;
+  }
+  :host([inlineContent]) slot[name="prefix"]::slotted(*),
+  :host([inlineContent]) slot[name="suffix"]::slotted(*) {
+    display: block;
+    flex: 0 0 auto;
+    max-width: 100%;
+    max-width: 100%;
+    white-space: nowrap;
+  }
+
+  :host([inlineContent]) .has-suffix slot[name="suffix"] {
+    margin-right: calc(-0.5 * var(--sc-input-px));
+  }
+  :host([inlineContent]) .has-prefix slot[name="prefix"] {
+    margin-left: calc(-0.5 * var(--sc-input-px));
+  }
+
+  :host([inlineContent]) slot[name="suffix"]::slotted(*) {
+    margin-left: auto;
+  }
+
+  :host([inlineContent]) .no-suffix slot[name="suffix"],
+  :host([inlineContent]) .no-prefix slot[name="prefix"] {
+    display: none;
+  }
+
+  /* :host([inlineContent]) .input {
+
+  }*/
+  /*Disabled */
+  :host([disabled]) .form-control {
+    cursor: not-allowed;
+  }
+
+  :host([variant="ghost"]) .form-element {
+    --sc-input-bg: transparent;
+  }
+
+  /*Disbaled*/
+  :host([disabled]) .form-element {
+    pointer-events: none;
+    opacity: 0.43;
+    /* border-color: transparent;*/
+  }
+  :host([disabled]) .select-chevron {
+    display: none;
+    /* border-color: transparent;*/
+  }
+
+  /*PLACEHOLDER*/
+  ::placeholder {
+    color: inherit;
+    opacity: 0.6;
+  }
+
+  :host([placehoderAsLabel]) ::placeholder {
+    opacity: 1;
+  }
+
+  :focus::placeholder {
+    opacity: 0 !important;
+  }
+
+  /*HOVER*/
+  :host(:not([disabled])) .form-element:hover,
+  .form-element:focus-visible,
+  .form-element:focus {
+    background-color: hsl(from var(--sc-input-bg) h s calc(l * 0.97));
+  }
+
+  .form-label {
+    margin-bottom: 0.22em;
+    display: block;
+  }
+
+  /*Utilitaires*/
+  .hidden {
+    display: none;
+  }
+  .contents {
+    display: contents;
+  }
+
+  /*ERROR*/
+  :host([error]) {
+    --sc-input-b-color: var(--sc-danger, var(--sc-base-content, #000));
+  }
+
+  :host input:visited {
+    display: none;
+  }
+
+  :host([touched][required]) :not(:focus):invalid {
+    --sc-input-b-color: var(--sc-danger, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-danger, var(--sc-base-content, #000));
+  }
+
+  :host([touched][required]) :not(:focus):invalid + .select-chevron {
+    --sc-input-c: var(--sc-danger, var(--sc-base-content, #000));
+  }
+
+  /*VALID*/
+  :host([touched][required]) :not([value=""]):not(:focus):valid {
+    --sc-input-b-color: var(--sc-success, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-success, var(--sc-base-content, #000));
+  }
+
+  :host([touched][required]) :not(:focus):valid + .select-chevron {
+    --sc-input-c: var(--sc-success, var(--sc-base-content, #000));
+  }
+  /*active*/
+  :host([active]) {
+    --sc-input-b-color: var(--sc-primary, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-primary, var(--sc-base-content, #000));
+  }
+  :host([active]) .select-chevron {
+    --sc-input-c: var(--sc-primary, var(--sc-base-content, #000));
+  }
+
+  /*Input COLOR*/
+  :host([type="color"]) .form-element {
+    padding: 0;
+    border: 0;
+    min-width: var(--sc-input-height);
+  }
+  input[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+  input[type="color"]::-webkit-color-swatch {
+    border: none;
+    border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr)
+      var(--sc-item-rounded-br) var(--sc-item-rounded-bl);
+  }
+
+  /*Input Image*/
+  :host([type="image"]) .form-element {
+    padding: 0;
+    border: none;
+  }
+
+  /*Input reset & image*/
+  input[type="reset"],
+  input[type="submit"] {
+    cursor: pointer;
+  }
+
+  /*Input search*/
+  :host([type="search"]) {
+    appearance: none !important;
+  }
+
+  input[type="search"]::-webkit-search-cancel-button {
+    appearance: none;
+    cursor: pointer;
+    height: 0.65em;
+    width: 0.65em;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  /* Text align */
+  :host([align="center"]) .form-element {
+    text-align: center;
+  }
+  :host([align="left"]) .form-element {
+    text-align: left;
+  }
+  :host([align="right"]) .form-element {
+    text-align: right;
+  }
+
+  /* No arrows ion input Number */
+  :host([noAppearance]) input[type="number"]::-webkit-outer-spin-button,
+  :host([noAppearance]) input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  :host([noAppearance]) input[type="number"] {
+    -moz-appearance: textfield !important;
+  }
+
+  /*type color "default" | "success" | "error" | "warning"  | "info" */
+  :host([status="success"]) {
+    --sc-input-b-color: var(--sc-success, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-success, var(--sc-base-content, #000));
+    --sc-input-addon-bg: var(--sc-success, var(--sc-base-content, #000));
+    --sc-input-addon-color: var(--sc-success-content, var(--sc-base, #fff));
+  }
+  :host([status="error"]) {
+    --sc-input-b-color: var(--sc-danger, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-danger, var(--sc-base-content, #000));
+    --sc-input-addon-bg: var(--sc-danger, var(--sc-base-content, #000));
+    --sc-input-addon-color: var(--sc-danger-content, var(--sc-base, #fff));
+  }
+  :host([status="warning"]) {
+    --sc-input-b-color: var(--sc-warning);
+    --sc-input-c: var(--sc-warning, var(--sc-base-content, #000));
+    --sc-input-addon-bg: var(--sc-warning, var(--sc-base-content, #000));
+    --sc-input-addon-color: var(--sc-warning-content, var(--sc-base, #fff));
+  }
+  :host([status="info"]) {
+    --sc-input-b-color: var(--sc-info, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-info, var(--sc-base-content, #000));
+    --sc-input-addon-bg: var(--sc-info, var(--sc-base-content, #000));
+    --sc-input-addon-color: var(--sc-info-content, var(--sc-base, #fff));
+  }
+  :host([status="primary"]) {
+    --sc-input-b-color: var(--sc-primary, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-primary, var(--sc-base-content, #000));
+    --sc-input-addon-bg: var(--sc-primary, var(--sc-base-content, #000));
+    --sc-input-addon-color: var(--sc-primary-content, var(--sc-base, #fff));
+  }
+`;
+//# sourceMappingURL=form-control.js.map

package/dist/js/core/components/ui/form/css/form-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control.js","sourceRoot":"","sources":["../../../../../../../src/core/components/ui/form/css/form-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;CAWhC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAcvB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;CAO7B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmW7B,CAAC"}

package/dist/js/core/components/ui/form/fieldset/fieldset.js

@@ -0,0 +1,124 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import "./legend";
+const tagName = "sonic-fieldset";
+let Fieldset = class Fieldset extends Subscriber(LitElement) {
+    constructor() {
+        super(...arguments);
+        // @property({ type: String }) label: String = "";
+        /**
+         * Désactiver le fieldset
+         */
+        this.disabled = false;
+        this.variant = "default";
+    }
+    render() {
+        return html `<fieldset
+      form="${ifDefined(this.form)}"
+      ?disabled="${this.disabled}"
+    >
+      ${this.label
+            ? html ` <sonic-legend
+            label=${ifDefined(this.label)}
+            description=${ifDefined(this.description)}
+            iconName=${ifDefined(this.iconName)}
+            iconPrefix=${ifDefined(this.iconPrefix)}
+            iconLibrary=${ifDefined(this.iconLibrary)}
+          ></sonic-legend>`
+            : nothing}
+      <slot></slot>
+    </fieldset>`;
+    }
+};
+Fieldset.styles = [
+    css `
+      :host {
+        --sc-fieldset-mt: 0;
+        --sc-fieldset-mb: 1rem;
+        --sc-fieldset-border-color: var(--sc-border-color);
+        --sc-fieldset-border-width: var(--sc-form-border-width);
+        --sc-fieldset-px: 1.25rem;
+        --sc-fieldset-py: 1.8rem;
+
+        margin-top: var(--sc-fieldset-mt);
+        margin-bottom: var(--sc-fieldset-mb);
+        display: block;
+        border: var(--sc-fieldset-border-width) solid
+          var(--sc-fieldset-border-color) !important;
+        padding: var(--sc-fieldset-py) var(--sc-fieldset-px);
+        border-radius: var(--sc-rounded-lg);
+      }
+
+      fieldset {
+        all: unset;
+        display: contents;
+      }
+
+      :host([variant="shadow"]),
+      :host([variant="ghost"]) {
+        --sc-fieldset-border-color: transparent;
+      }
+      :host([variant="shadow"]) {
+        --sc-fieldset-border-color: transparent;
+        box-shadow: var(--sc-shadow-lg);
+      }
+
+      :host([tight]) {
+        --sc-fieldset-px: 0;
+        border-left: none !important;
+        border-right: none !important;
+        border-radius: 0;
+      }
+
+      sonic-legend,
+      ::slotted(sonic-legend) {
+        margin-bottom: 1.5rem;
+        display: block;
+      }
+
+      sonic-legend:last-child,
+      ::slotted(sonic-legend:last-child) {
+        margin-bottom: 0;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Fieldset.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], Fieldset.prototype, "form", void 0);
+__decorate([
+    property({ type: String })
+], Fieldset.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], Fieldset.prototype, "description", void 0);
+__decorate([
+    property({ type: String })
+], Fieldset.prototype, "iconName", void 0);
+__decorate([
+    property({ type: String })
+], Fieldset.prototype, "iconLibrary", void 0);
+__decorate([
+    property({ type: String })
+], Fieldset.prototype, "iconPrefix", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Fieldset.prototype, "tight", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Fieldset.prototype, "variant", void 0);
+Fieldset = __decorate([
+    customElement(tagName)
+], Fieldset);
+export { Fieldset };
+//# sourceMappingURL=fieldset.js.map

package/dist/js/core/components/ui/form/fieldset/fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset.js","sourceRoot":"","sources":["../../../../../../../src/core/components/ui/form/fieldset/fieldset.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,UAAU,MAAM,8CAA8C,CAAC;AACtE,OAAO,UAAU,CAAC;AAElB,MAAM,OAAO,GAAG,gBAAgB,CAAC;AAG1B,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU,CAAC,UAAU,CAAC;IAA7C;;QAsDL,kDAAkD;QAElD;;WAEG;QACyC,aAAQ,GAAiB,KAAK,CAAC;QAchC,YAAO,GAGnC,SAAS,CAAC;IAmB3B,CAAC;IAjBC,MAAM;QACJ,OAAO,IAAI,CAAA;cACD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;mBACf,IAAI,CAAC,QAAQ;;QAExB,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;oBACM,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;0BACf,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC;uBAC9B,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;yBACtB,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;0BACzB,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC;2BAC1B;YACnB,CAAC,CAAC,OAAO;;gBAED,CAAC;IACf,CAAC;;AA7FM,eAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiDF;CACF,AAnDY,CAmDX;AAO0C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAgC;AAI/C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAe;AAEd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAqB;AAEJ;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAiB;AAEjB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAGjB;AA5Ed,QAAQ;IADpB,aAAa,CAAC,OAAO,CAAC;GACV,QAAQ,CA+FpB"}

package/dist/js/core/components/ui/form/fieldset/legend-description.js

@@ -0,0 +1,38 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
+let LegendDescription = class LegendDescription extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+LegendDescription.styles = [
+    css `
+      :host {
+        font-size: 1.15rem;
+        line-height: 1.2;
+        display: block;
+        color: var(--sc-base-500, var(--sc-base-content, #000));
+        font-weight: var(--sc-font-weight-base, 400);
+        font-style: var(--sc-font-style-base, normal);
+        margin-top: 0.2em;
+        container-type: inline-size;
+      }
+
+      @container (max-inline-size: 28rem) {
+        :host {
+          font-size: 1rem;
+        }
+      }
+    `,
+];
+LegendDescription = __decorate([
+    customElement("sonic-legend-description")
+], LegendDescription);
+export { LegendDescription };
+//# sourceMappingURL=legend-description.js.map

package/dist/js/core/components/ui/form/fieldset/legend-description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend-description.js","sourceRoot":"","sources":["../../../../../../../src/core/components/ui/form/fieldset/legend-description.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAsB/C,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAvBM,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBF;CACF,AAnBY,CAmBX;AApBS,iBAAiB;IAD7B,aAAa,CAAC,0BAA0B,CAAC;GAC7B,iBAAiB,CAyB7B"}

package/dist/js/core/components/ui/form/fieldset/legend.js

@@ -0,0 +1,130 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "@supersoniks/concorde/core/components/ui/form/fieldset/legend-description";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+const tagName = "sonic-legend";
+let Legend = class Legend extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.forceAutoFill = false;
+    }
+    get description() {
+        return this._description;
+    }
+    set description(value) {
+        if (this.hasAttribute("description") && !this.forceAutoFill)
+            value = this.getAttribute("description");
+        this._description = value;
+        this.requestUpdate();
+    }
+    get label() {
+        return this._label;
+    }
+    set label(value) {
+        if (this.hasAttribute("label") && !this.forceAutoFill)
+            value = this.getAttribute("label");
+        this._label = value;
+        this.requestUpdate();
+    }
+    render() {
+        return html `<legend part="legend">
+      ${this.iconName
+            ? html `<div class="icon">
+            <sonic-icon
+              name=${this.iconName}
+              prefix=${ifDefined(this.iconPrefix)}
+              library=${ifDefined(this.iconLibrary)}
+            ></sonic-icon>
+          </div>`
+            : ""}
+
+      <div class="legend-content">
+        ${unsafeHTML(this.label ? this.label : "")}
+        ${this.description
+            ? html `<sonic-legend-description
+              >${unsafeHTML(this.description)}</sonic-legend-description
+            >`
+            : ""}
+        <slot></slot>
+      </div>
+      <slot name="suffix"></slot>
+    </legend>`;
+    }
+};
+Legend.styles = [
+    css `
+      :host {
+        --sc-legend-font-size: 1.5rem;
+        --sc-legend-font-weight: var(--sc-font-weight-base, 400);
+        --sc-legend-font-style: var(--sc-headings-font-style, normal);
+        --sc-legend-family: var(
+          --sc-headings-font-family,
+          var(--sc-font-family-base, sans-serif)
+        );
+        --sc-legend-line-height: var(--sc-headings-line-height, 1.1);
+        --sc-legend-color: var(--sc-base-content, #000);
+        display: flex;
+        width: 100%;
+        container-type: inline-size;
+      }
+
+      @container (max-inline-size: 28rem) {
+        legend {
+          --sc-legend-font-size: 1.3rem;
+        }
+      }
+      legend {
+        font-size: var(--sc-legend-font-size);
+        font-weight: var(--sc-legend-font-weight);
+        font-style: var(--sc-legend-font-style);
+        font-family: var(--sc-legend-font-family);
+        line-height: var(--sc-legend-line-height);
+        color: var(--sc-legend-color);
+        padding: 0;
+        display: flex;
+        width: 100%;
+        align-items: flex-start;
+        gap: 0.35em;
+      }
+
+      slot[name="suffix"] {
+        display: block;
+        margin-left: auto;
+        flex-shrink: 0;
+      }
+
+      .legend-content {
+        flex-grow: 1;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean })
+], Legend.prototype, "forceAutoFill", void 0);
+__decorate([
+    property()
+], Legend.prototype, "description", null);
+__decorate([
+    property()
+], Legend.prototype, "label", null);
+__decorate([
+    property({ type: String })
+], Legend.prototype, "iconName", void 0);
+__decorate([
+    property({ type: String })
+], Legend.prototype, "iconLibrary", void 0);
+__decorate([
+    property({ type: String })
+], Legend.prototype, "iconPrefix", void 0);
+Legend = __decorate([
+    customElement(tagName)
+], Legend);
+export { Legend };
+//# sourceMappingURL=legend.js.map