@ds-gn/ui 0.5.3 → 0.6.1

package/README.md

@@ -13,7 +13,12 @@ System.
 [Website](https://ds-gn.com/?utm_source=npm&utm_medium=readme&utm_campaign=ui&utm_content=website_link)
 · [Documentation](https://docs.ds-gn.com/) ·
 [Component reference](https://docs.ds-gn.com/components/button/) ·
-[Changelog](https://docs.ds-gn.com/changelog/ui/)
+[Changelog](https://docs.ds-gn.com/changelog/ui/) ·
+[Public repository](https://github.com/LightLeapLabs/design-system)
+
+npm's Repository link points to our private build repository, which is required
+for Trusted Publishing. For examples and issue reporting, visit our
+[public design-system repository](https://github.com/LightLeapLabs/design-system).
 
 ## Install
 
@@ -112,13 +117,13 @@ The string helpers inherit `currentColor` for theme-aware lettering and keep the
 <details>
 <summary><strong>Public Beta components and compatibility policy</strong></summary>
 
-The first public release includes 24 custom elements:
+The Public Beta includes 26 custom elements:
 
 | Group                     | Included components                                                                                                                                                                                                       |
 | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | App-capable               | `Button` (`dsgn-button`), `Input` (`dsgn-input`), `Modal` (`dsgn-modal`)                                                                                                                                                  |
 | Display and layout        | `Background` (`dsgn-background`), `Badge` (`dsgn-badge`), `Card` (`dsgn-card`), `CodeBlock` (`dsgn-code-block`), `Container` (`dsgn-container`), `Divider` (`dsgn-divider`), `Grid` (`dsgn-grid`), `Stack` (`dsgn-stack`) |
-| Content                   | `Heading` (`dsgn-heading`), `Text` (`dsgn-text`), `Icon` (`dsgn-icon`), `Image` (`dsgn-image`)                                                                                                                            |
+| Content                   | `Heading` (`dsgn-heading`), `Text` (`dsgn-text`), `Icon` (`dsgn-icon`), `Image` (`dsgn-image`), `Callout` (`dsgn-callout`), `CodeSnippet` (`dsgn-code-snippet`)                                                           |
 | Marketing and composition | `Hero` (`dsgn-hero`), `HeadingBlock` (`dsgn-heading-block`), `FeatureItem` (`dsgn-feature-item`), `FeatureTabs` (`dsgn-feature-tabs`), `FormBlock` (`dsgn-form-block`)                                                    |
 | Navigation                | `Nav` (`dsgn-nav`), `NavLink` (`dsgn-nav-link`), `NavDropdownColumn` (`dsgn-nav-dropdown-column`), `Footer` (`dsgn-footer`)                                                                                               |
 

package/custom-elements.json

@@ -651,6 +651,91 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/Callout/src/Callout.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Callout",
+          "slots": [
+            {
+              "description": "Optional heading, rendered in bold above the content.",
+              "name": "title"
+            },
+            {
+              "description": "Callout content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "surface",
+              "type": {
+                "text": "SurfaceType"
+              },
+              "description": "Surface theme variant (light or dark)",
+              "attribute": "surface",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tone",
+              "type": {
+                "text": "CalloutToneType"
+              },
+              "description": "Semantic tone, which sets the colour and the icon",
+              "attribute": "tone",
+              "reflects": true
+            }
+          ],
+          "superclass": {
+            "name": "Base",
+            "package": "@common/Base/Base.ts"
+          },
+          "tagName": "dsgn-callout",
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "surface",
+              "fieldName": "surface",
+              "type": {
+                "text": "SurfaceType"
+              },
+              "description": "Surface theme variant (light or dark)"
+            },
+            {
+              "name": "tone",
+              "fieldName": "tone",
+              "type": {
+                "text": "CalloutToneType"
+              },
+              "description": "Semantic tone, which sets the colour and the icon"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Callout",
+          "declaration": {
+            "name": "Callout",
+            "module": "components/Callout/src/Callout.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "dsgn-callout",
+          "declaration": {
+            "name": "Callout",
+            "module": "components/Callout/src/Callout.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/Card/src/Card.ts",
@@ -904,6 +989,171 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/CodeSnippet/src/CodeSnippet.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A framed code sample with an optional filename, language label, and a copy\nbutton. Slot in a `<pre>` — plain or pre-highlighted (for example, Shiki\noutput). The copy button copies the slotted text exactly as displayed.",
+          "name": "CodeSnippet",
+          "slots": [
+            {
+              "description": "The code, typically a `<pre>` element.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "filename",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "File name shown in the header",
+              "attribute": "filename"
+            },
+            {
+              "kind": "field",
+              "name": "language",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Language label shown in the header",
+              "attribute": "language"
+            },
+            {
+              "kind": "field",
+              "name": "copyLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Copy button label. The button is only rendered when a label is supplied.",
+              "attribute": "copy-label"
+            },
+            {
+              "kind": "field",
+              "name": "copiedLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Label shown and announced after a successful copy",
+              "attribute": "copied-label"
+            },
+            {
+              "kind": "field",
+              "name": "_copied",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_resetTimer",
+              "type": {
+                "text": "ReturnType<typeof setTimeout> | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_codeText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "description": "The text of the slotted code, as displayed."
+            },
+            {
+              "kind": "method",
+              "name": "_handleCopy",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_renderButton",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "Fired after the code is copied; `detail` is `{ text }`.",
+              "name": "dsgn-copy"
+            }
+          ],
+          "superclass": {
+            "name": "Base",
+            "package": "@common/Base/Base.ts"
+          },
+          "tagName": "dsgn-code-snippet",
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "filename",
+              "fieldName": "filename",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "File name shown in the header"
+            },
+            {
+              "name": "language",
+              "fieldName": "language",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Language label shown in the header"
+            },
+            {
+              "name": "copy-label",
+              "fieldName": "copyLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Copy button label. The button is only rendered when a label is supplied."
+            },
+            {
+              "name": "copied-label",
+              "fieldName": "copiedLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Label shown and announced after a successful copy"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CodeSnippet",
+          "declaration": {
+            "name": "CodeSnippet",
+            "module": "components/CodeSnippet/src/CodeSnippet.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "dsgn-code-snippet",
+          "declaration": {
+            "name": "CodeSnippet",
+            "module": "components/CodeSnippet/src/CodeSnippet.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/Container/src/Container.ts",

package/dist/components/Callout/src/Callout.d.ts

@@ -0,0 +1,28 @@
+import '../../../types/global.d.ts';
+import '../../Icon/src/Icon.js';
+import { Base } from '../../../common/Base/Base.js';
+import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
+import { type CSSResultGroup } from 'lit';
+import { type CalloutToneType } from './Callout.props.js';
+/**
+ * @slot title - Optional heading, rendered in bold above the content.
+ * @slot - Callout content.
+ */
+export declare class Callout extends Base {
+    static styles: CSSResultGroup;
+    /**
+     * Surface theme variant (light or dark)
+     */
+    surface: SurfaceType;
+    /**
+     * Semantic tone, which sets the colour and the icon
+     */
+    tone: CalloutToneType;
+    render(): import("lit").TemplateResult<1>;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-callout': Callout;
+    }
+}

package/dist/components/Callout/src/Callout.js

@@ -0,0 +1,376 @@
+var __legacyDecorateClassTS = 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;
+};
+
+// components/Callout/src/Callout.ts
+import"../../Icon/src/Icon.js";
+
+// common/Base/Base.ts
+import { html, LitElement } from "lit";
+
+// common/helpers/define-element.ts
+var defineElement = (tag, ctor) => {
+  if (typeof customElements === "undefined")
+    return;
+  if (!customElements.get(tag))
+    customElements.define(tag, ctor);
+};
+
+// common/Base/Base.css
+import { css } from "lit";
+var styles = css`/* Base reset in @layer base ensures it comes before utilities in Tailwind v4 cascade
+   This prevents the reset from overriding component utility classes */
+@layer base {
+  :host {
+    display: block;
+    box-sizing: border-box;
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(
+      --default-font-family,
+      var(--font-sans, ui-sans-serif, system-ui, sans-serif)
+    );
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+
+  :host h1,
+  :host h2,
+  :host h3,
+  :host h4,
+  :host h5,
+  :host h6 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: 0;
+    padding: 0;
+  }
+}
+`;
+var Base_default = styles;
+
+// common/Base/Base.ts
+class Base extends LitElement {
+  static styles = Base_default;
+  updateTheme(changedProperties, surface) {
+    if (changedProperties.has("surface")) {
+      if (surface) {
+        this.setAttribute("data-theme", surface);
+      } else {
+        this.removeAttribute("data-theme");
+      }
+    }
+  }
+  emit(name, detail, options = {}) {
+    return this.dispatchEvent(new CustomEvent(name, {
+      detail,
+      bubbles: true,
+      composed: true,
+      cancelable: options.cancelable ?? false
+    }));
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+defineElement("dsgn-base", Base);
+
+// common/helpers/enum-validator.ts
+var enumValidator = (propName, enumSet, candidateValue) => {
+  if (!enumSet.has(candidateValue)) {
+    throw new Error(`Invalid prop ${propName} of value ${candidateValue}. Expected one of: ${Array.from(enumSet).join(", ")}`);
+  }
+};
+
+// common/helpers/enum-creator.ts
+var enumCreator = (acceptableValues, propName, type, other = {}) => {
+  const acceptableValuesSet = new Set(acceptableValues);
+  return {
+    type,
+    hasChanged(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        enumValidator(propName, acceptableValuesSet, newValue);
+        return true;
+      }
+      return false;
+    },
+    ...other
+  };
+};
+
+// common/props/surface/surface.props.ts
+var surfaceValues = {
+  LIGHT: "light",
+  DARK: "dark"
+};
+var surfaceProps = enumCreator(Object.values(surfaceValues), "surface", String, { reflect: true });
+
+// components/Callout/src/Callout.ts
+import { html as html2 } from "lit";
+import { property } from "lit/decorators.js";
+// components/Icon/src/icons/circle-alert.ts
+import { svg } from "lit";
+var circleAlert = svg`<circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line x1="12" x2="12.01" y1="16" y2="16" />`;
+// components/Icon/src/icons/circle-check.ts
+import { svg as svg2 } from "lit";
+var circleCheck = svg2`<circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />`;
+// components/Icon/src/icons/info.ts
+import { svg as svg3 } from "lit";
+var info = svg3`<circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />`;
+// components/Icon/src/icons/triangle-alert.ts
+import { svg as svg4 } from "lit";
+var triangleAlert = svg4`<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" />`;
+// components/Callout/src/Callout.css
+import { css as css2 } from "lit";
+var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme {
+  :root, :host {
+    --spacing: 0.25rem;
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --font-weight-semibold: 600;
+    --leading-relaxed: 1.625;
+    --radius-lg: 0.5rem;
+    --color-error: inherit;
+    --color-error-subtle: inherit;
+    --color-info: inherit;
+    --color-info-subtle: inherit;
+    --color-success: inherit;
+    --color-success-subtle: inherit;
+    --color-text-primary: inherit;
+    --color-warning: inherit;
+    --color-warning-subtle: inherit;
+  }
+}
+@layer utilities {
+  .static {
+    position: static;
+  }
+  .flex {
+    display: flex;
+  }
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-l-4 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 4px;
+  }
+  .border-error {
+    border-color: var(--color-error);
+  }
+  .border-info {
+    border-color: var(--color-info);
+  }
+  .border-success {
+    border-color: var(--color-success);
+  }
+  .border-warning {
+    border-color: var(--color-warning);
+  }
+  .bg-error-subtle {
+    background-color: var(--color-error-subtle);
+  }
+  .bg-info-subtle {
+    background-color: var(--color-info-subtle);
+  }
+  .bg-success-subtle {
+    background-color: var(--color-success-subtle);
+  }
+  .bg-warning-subtle {
+    background-color: var(--color-warning-subtle);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .pt-0\\.5 {
+    padding-top: calc(var(--spacing) * 0.5);
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .leading-relaxed {
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .text-error {
+    color: var(--color-error);
+  }
+  .text-info {
+    color: var(--color-info);
+  }
+  .text-success {
+    color: var(--color-success);
+  }
+  .text-text-primary {
+    color: var(--color-text-primary);
+  }
+  .text-warning {
+    color: var(--color-warning);
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var Callout_default = styles2;
+
+// components/Callout/src/Callout.props.ts
+var calloutToneValues = {
+  NOTE: "note",
+  TIP: "tip",
+  WARNING: "warning",
+  DANGER: "danger"
+};
+var calloutToneProps = enumCreator(Object.values(calloutToneValues), "tone", String, { reflect: true });
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// components/Callout/src/Callout.styles.ts
+var toneClasses = {
+  [calloutToneValues.NOTE]: ["bg-info-subtle", "border-info"],
+  [calloutToneValues.TIP]: ["bg-success-subtle", "border-success"],
+  [calloutToneValues.WARNING]: ["bg-warning-subtle", "border-warning"],
+  [calloutToneValues.DANGER]: ["bg-error-subtle", "border-error"]
+};
+var iconToneClasses = {
+  [calloutToneValues.NOTE]: "text-info",
+  [calloutToneValues.TIP]: "text-success",
+  [calloutToneValues.WARNING]: "text-warning",
+  [calloutToneValues.DANGER]: "text-error"
+};
+var classNames = (tone) => clsx_default("flex", "gap-3", "rounded-lg", "border", "border-l-4", "px-4", "py-3", "text-text-primary", toneClasses[tone]);
+var iconClassNames = (tone) => clsx_default("flex", "shrink-0", "pt-0.5", iconToneClasses[tone]);
+var contentClassNames = () => clsx_default("flex", "min-w-0", "flex-col", "gap-1", "text-sm", "leading-relaxed");
+var titleClassNames = () => clsx_default("font-semibold", "text-text-primary");
+
+// components/Callout/src/Callout.ts
+var toneIcons = {
+  [calloutToneValues.NOTE]: info,
+  [calloutToneValues.TIP]: circleCheck,
+  [calloutToneValues.WARNING]: triangleAlert,
+  [calloutToneValues.DANGER]: circleAlert
+};
+
+class Callout extends Base {
+  constructor() {
+    super(...arguments);
+    this.surface = surfaceValues.LIGHT;
+    this.tone = calloutToneValues.NOTE;
+  }
+  static styles = [Base.styles, Callout_default];
+  render() {
+    const { tone } = this;
+    return html2`<aside class="${classNames(tone)}" role="note">
+      <span class="${iconClassNames(tone)}" aria-hidden="true"
+        ><dsgn-icon .icon=${toneIcons[tone]} size="sm"></dsgn-icon
+      ></span>
+      <div class="${contentClassNames()}">
+        <div class="${titleClassNames()}"><slot name="title"></slot></div>
+        <div><slot></slot></div>
+      </div>
+    </aside>`;
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], Callout.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ ...calloutToneProps })
+], Callout.prototype, "tone", undefined);
+defineElement("dsgn-callout", Callout);
+export {
+  Callout
+};