@sondor-technology/sondor-components 1.0.0-1165-initial-setup.11 → 1.0.0

package/src/components/button-group/button-group.ts

@@ -1,67 +1,67 @@
-import {LitElement, html, css} from "lit";
-import {customElement} from "lit/decorators.js";
-import {resetStyles} from "../../styles/reset";
-
-@customElement("st-button-group")
-export class StButtonGroup extends LitElement {
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: inline-flex;
-        align-items: center;
-      }
-
-      .group {
-        display: inline-flex;
-      }
-
-      /* 1. Flatten all corners by default */
-      ::slotted(st-button) {
-        --btn-radius-tl: 0px;
-        --btn-radius-tr: 0px;
-        --btn-radius-br: 0px;
-        --btn-radius-bl: 0px;
-        position: relative;
-      }
-
-      /* 2. Restore ONLY the left corners for the first button */
-      ::slotted(st-button:first-child) {
-        --btn-radius-tl: var(--st-radius-md, 0.5rem);
-        --btn-radius-bl: var(--st-radius-md, 0.5rem);
-      }
-
-      /* 3. Restore ONLY the right corners for the last button */
-      ::slotted(st-button:last-child) {
-        --btn-radius-tr: var(--st-radius-md, 0.5rem);
-        --btn-radius-br: var(--st-radius-md, 0.5rem);
-      }
-
-      /* 4. Collapse borders by hiding the left border of adjacent default buttons */
-      ::slotted(st-button[color="default"]:not(:first-child)) {
-        margin-left: -1px;
-      }
-
-      /* 5. Prevent Primary buttons from overlapping at all, use box-shadow for the divider */
-      ::slotted(st-button[color="primary"]:not(:first-child)) {
-        --btn-divider: inset 1px 0 0 0 rgba(255, 255, 255, 0.3);
-        margin-left: 0; /* Override any inherited negative margins */
-      }
-
-      /* 6. Pull active/hovered default buttons forward so their full border shows */
-      ::slotted(st-button[color="default"]:hover),
-      ::slotted(st-button[color="default"]:focus-within),
-      ::slotted(st-button[color="default"]:active) {
-        z-index: 1;
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <div class="group" role="group" aria-label="button group">
-        <slot></slot>
-      </div>
-    `;
-  }
-}
+import {LitElement, html, css} from "lit";
+import {customElement} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset";
+
+@customElement("st-button-group")
+export class StButtonGroup extends LitElement {
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .group {
+        display: inline-flex;
+      }
+
+      /* 1. Flatten all corners by default */
+      ::slotted(st-button) {
+        --btn-radius-tl: 0px;
+        --btn-radius-tr: 0px;
+        --btn-radius-br: 0px;
+        --btn-radius-bl: 0px;
+        position: relative;
+      }
+
+      /* 2. Restore ONLY the left corners for the first button */
+      ::slotted(st-button:first-child) {
+        --btn-radius-tl: var(--st-radius-md, 0.5rem);
+        --btn-radius-bl: var(--st-radius-md, 0.5rem);
+      }
+
+      /* 3. Restore ONLY the right corners for the last button */
+      ::slotted(st-button:last-child) {
+        --btn-radius-tr: var(--st-radius-md, 0.5rem);
+        --btn-radius-br: var(--st-radius-md, 0.5rem);
+      }
+
+      /* 4. Collapse borders by hiding the left border of adjacent default buttons */
+      ::slotted(st-button[color="default"]:not(:first-child)) {
+        margin-left: -1px;
+      }
+
+      /* 5. Prevent Primary buttons from overlapping at all, use box-shadow for the divider */
+      ::slotted(st-button[color="primary"]:not(:first-child)) {
+        --btn-divider: inset 1px 0 0 0 rgba(255, 255, 255, 0.3);
+        margin-left: 0; /* Override any inherited negative margins */
+      }
+
+      /* 6. Pull active/hovered default buttons forward so their full border shows */
+      ::slotted(st-button[color="default"]:hover),
+      ::slotted(st-button[color="default"]:focus-within),
+      ::slotted(st-button[color="default"]:active) {
+        z-index: 1;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="group" role="group" aria-label="button group">
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/components/card/card.ts

@@ -1,53 +1,53 @@
-import { LitElement, html, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-
-@customElement('st-card')
-export class StCard extends LitElement {
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        background-color: var(--st-color-bg);
-        border: 1px solid var(--st-color-border);
-        border-radius: 8px;
-        overflow: hidden; /* Ensures contents don't break the border radius */
-      }
-
-      /* Apply standard padding to all direct slotted children */
-      ::slotted(*) {
-        padding: var(--st-spacing-md) var(--st-spacing-lg);
-      }
-
-      /* Optional structured slots for headers and footers */
-      ::slotted([slot="header"]) {
-        border-bottom: 1px solid var(--st-color-border);
-        background-color: var(--st-color-surface);
-        font-weight: var(--st-font-weight-medium);
-        margin: 0;
-      }
-
-      ::slotted([slot="footer"]) {
-        border-top: 1px solid var(--st-color-border);
-        background-color: var(--st-color-surface);
-        margin-top: auto; /* Pushes the footer to the bottom if the card has a fixed height */
-      }
-    `
-  ];
-
-  render() {
-    return html`
-      <slot name="header"></slot>
-      <slot></slot>
-      <slot name="footer"></slot>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'st-card': StCard;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+@customElement('st-card')
+export class StCard extends LitElement {
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--st-color-bg);
+        border: 1px solid var(--st-color-border);
+        border-radius: 8px;
+        overflow: hidden; /* Ensures contents don't break the border radius */
+      }
+
+      /* Apply standard padding to all direct slotted children */
+      ::slotted(*) {
+        padding: var(--st-spacing-md) var(--st-spacing-lg);
+      }
+
+      /* Optional structured slots for headers and footers */
+      ::slotted([slot="header"]) {
+        border-bottom: 1px solid var(--st-color-border);
+        background-color: var(--st-color-surface);
+        font-weight: var(--st-font-weight-medium);
+        margin: 0;
+      }
+
+      ::slotted([slot="footer"]) {
+        border-top: 1px solid var(--st-color-border);
+        background-color: var(--st-color-surface);
+        margin-top: auto; /* Pushes the footer to the bottom if the card has a fixed height */
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <slot name="header"></slot>
+      <slot></slot>
+      <slot name="footer"></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-card': StCard;
+  }
 }