@boostdev/design-system-components 1.1.1 → 1.2.0

package/dist/native/index.cjs

@@ -737,22 +737,23 @@ function Button({
 }) {
   const { colors: colors2 } = useTheme();
   const { height, px, fontSize, radius } = sizeTokens[size];
-  const primaryColor = colors2.colorGreen;
-  const onPrimaryColor = colors2.colorOnGreen;
-  const ghostTextColor = colors2.colorGreenStrong;
+  const primaryColor = colors2.colorInteractive;
+  const onPrimaryColor = colors2.colorOnInteractive;
+  const outlineTextColor = colors2.colorInteractiveOnBg;
+  const isOutline = variant === "outline" || variant === "ghost";
   const containerStyle = {
     height,
     paddingHorizontal: px,
     borderRadius: radius,
     opacity: disabled ? 0.4 : 1,
     ...variant === "default" && { backgroundColor: primaryColor },
-    ...variant === "ghost" && {
+    ...isOutline && {
       backgroundColor: "transparent",
       borderWidth: 1,
-      borderColor: ghostTextColor
+      borderColor: outlineTextColor
     }
   };
-  const textColor = variant === "default" ? onPrimaryColor : ghostTextColor;
+  const textColor = variant === "default" ? onPrimaryColor : outlineTextColor;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     import_react_native15.Pressable,
     {
@@ -855,8 +856,8 @@ function Switch({
           accessibilityLabel: label,
           accessibilityRole: "switch",
           accessibilityState: { checked: value, disabled },
-          thumbColor: value ? colors2.colorOnInteractive : colors2.colorOnBg,
-          trackColor: { false: colors2.colorBgSubtle, true: colors2.colorInteractive }
+          thumbColor: colors2.colorInteractive,
+          trackColor: { false: colors2.colorBgSubtle, true: colors2.colorBlueSubtle }
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label, { label })

package/dist/native/index.d.cts

@@ -141,7 +141,7 @@ interface ButtonGroupProps {
 }
 declare function ButtonGroup({ children, variant, accessibilityLabel, style }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
 
-type ButtonVariant = 'default' | 'ghost';
+type ButtonVariant = 'default' | 'outline' | 'ghost';
 type ButtonSize = 'small' | 'medium' | 'large';
 interface ButtonProps {
     children?: ReactNode;

package/dist/native/index.d.ts

@@ -141,7 +141,7 @@ interface ButtonGroupProps {
 }
 declare function ButtonGroup({ children, variant, accessibilityLabel, style }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
 
-type ButtonVariant = 'default' | 'ghost';
+type ButtonVariant = 'default' | 'outline' | 'ghost';
 type ButtonSize = 'small' | 'medium' | 'large';
 interface ButtonProps {
     children?: ReactNode;

package/dist/native/index.js

@@ -684,22 +684,23 @@ function Button({
 }) {
   const { colors: colors2 } = useTheme();
   const { height, px, fontSize, radius } = sizeTokens[size];
-  const primaryColor = colors2.colorGreen;
-  const onPrimaryColor = colors2.colorOnGreen;
-  const ghostTextColor = colors2.colorGreenStrong;
+  const primaryColor = colors2.colorInteractive;
+  const onPrimaryColor = colors2.colorOnInteractive;
+  const outlineTextColor = colors2.colorInteractiveOnBg;
+  const isOutline = variant === "outline" || variant === "ghost";
   const containerStyle = {
     height,
     paddingHorizontal: px,
     borderRadius: radius,
     opacity: disabled ? 0.4 : 1,
     ...variant === "default" && { backgroundColor: primaryColor },
-    ...variant === "ghost" && {
+    ...isOutline && {
       backgroundColor: "transparent",
       borderWidth: 1,
-      borderColor: ghostTextColor
+      borderColor: outlineTextColor
     }
   };
-  const textColor = variant === "default" ? onPrimaryColor : ghostTextColor;
+  const textColor = variant === "default" ? onPrimaryColor : outlineTextColor;
   return /* @__PURE__ */ jsxs5(
     Pressable4,
     {
@@ -802,8 +803,8 @@ function Switch({
           accessibilityLabel: label,
           accessibilityRole: "switch",
           accessibilityState: { checked: value, disabled },
-          thumbColor: value ? colors2.colorOnInteractive : colors2.colorOnBg,
-          trackColor: { false: colors2.colorBgSubtle, true: colors2.colorInteractive }
+          thumbColor: colors2.colorInteractive,
+          trackColor: { false: colors2.colorBgSubtle, true: colors2.colorBlueSubtle }
         }
       ),
       /* @__PURE__ */ jsx18(Label, { label })

package/dist/web-components/chunk-2QA62WCQ.js

@@ -0,0 +1,48 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-skeleton.ts
+var BdsSkeleton = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    .skeleton {
+      display: block;
+      background: linear-gradient(
+        90deg,
+        var(--bds-color_grey--subtle) 25%,
+        var(--bds-color_bg) 50%,
+        var(--bds-color_grey--subtle) 75%
+      );
+      background-size: 200% 100%;
+      animation: shimmer 1.5s infinite;
+      border-radius: var(--bds-border_radius--xs);
+      min-block-size: var(--bds-space_m);
+      inline-size: 100%;
+    }
+
+    @keyframes shimmer {
+      0% { background-position: 200% 0; }
+      100% { background-position: -200% 0; }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .skeleton {
+        animation: none;
+      }
+    }
+  `;
+  render() {
+    return T`<span class="skeleton" aria-hidden="true"></span>`;
+  }
+};
+customElements.define("bds-skeleton", BdsSkeleton);
+
+export {
+  BdsSkeleton
+};

package/dist/web-components/chunk-3REOIRDW.js

@@ -0,0 +1,246 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-button.ts
+var BdsButton = class extends i2 {
+  static styles = i`
+    @keyframes fadeZoom {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50%       { opacity: 0.75; transform: scale(1.15); }
+    }
+
+    @keyframes pulse {
+      0%   { transform: scale(1);    box-shadow: 0 0 0 0    rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 50%); }
+      70%  { transform: scale(1.01); box-shadow: 0 0 0 var(--bds-space_m) rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 0%); }
+      100% { transform: scale(1);    box-shadow: 0 0 0 0    rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 0%); }
+    }
+
+    :host {
+      display: inline-flex;
+    }
+
+    .button,
+    .button[href] {
+      all: unset;
+      position: relative;
+      font: inherit;
+      padding-inline: var(--bds-space_l);
+      display: inline-flex;
+      gap: var(--bds-space_xs);
+      border-radius: var(--button_border_radius--s, var(--bds-border_radius--s));
+      align-items: center;
+      cursor: pointer;
+      justify-content: center;
+      height: var(--button_height, 3em);
+      font-size: var(--button_font-size, inherit);
+      white-space: nowrap;
+      line-height: 1;
+
+      --button_color:        var(--bds-color_interactive);
+      --button_on-color:     var(--bds-color_on-interactive);
+      --button_color--on-bg: var(--bds-color_interactive_on-bg);
+
+      background-color: var(--button_bg, var(--button_color));
+      color: var(--button_text, var(--button_on-color));
+      border: var(--button_border, none);
+      --bdc_color: transparent;
+
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
+      transition: var(--bds-animation_transition),
+                  --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .button[href] {
+      text-decoration: none;
+    }
+
+    /* Variants */
+    .button.outline,
+    .button.ghost /* deprecated — use variant="outline" */ {
+      --button_bg:   transparent;
+      --button_text: var(--button_color--on-bg);
+      --bdc_color:   var(--button_color--on-bg);
+    }
+
+    /* Sizes */
+    .button.small {
+      --button_height:    2.25em;
+      --button_font-size: var(--bds-font_size--body--s);
+      --button_border_radius--s: var(--bds-border_radius--xs);
+      padding-inline: var(--bds-space_m);
+    }
+
+    .button.medium {
+      --button_height: 3em;
+      padding-inline: var(--bds-space_l);
+    }
+
+    .button.large {
+      --button_font-size: var(--bds-font_size--heading-3);
+      --button_border_radius--s: var(--bds-border_radius--m);
+      padding-inline: var(--bds-space_xl);
+    }
+
+    /* Pulse */
+    .button.has-pulse {
+      animation: pulse 3s infinite;
+    }
+
+    /* SVG icon colour */
+    .button svg {
+      --icon__stroke: currentcolor;
+      fill: currentcolor;
+      color: currentcolor;
+      flex-shrink: 0;
+    }
+
+    /* Icon slots — hidden by default, shown when slot has content */
+    .icon-start,
+    .icon-end {
+      display: none;
+      align-items: center;
+    }
+
+    .icon-start.has-content {
+      display: flex;
+      margin-inline-start: calc(var(--bds-space_s) * -1);
+      transition: var(--bds-animation_transition);
+    }
+
+    .icon-end.has-content {
+      display: flex;
+      margin-inline-end: calc(var(--bds-space_s) * -1);
+      transition: var(--bds-animation_transition);
+    }
+
+    /* Hover icon animation */
+    @media (hover: hover) and (pointer: fine) {
+      .button:hover .icon-start svg,
+      .button:hover .icon-end svg {
+        animation: fadeZoom 2s ease-out infinite;
+      }
+
+      /* Default hover */
+      .button.default:hover {
+        --button_bg:          var(--bds-color_bg);
+        --button_text:        var(--bds-color_interactive);
+        --button_pulse-color: var(--bds-color_interactive);
+        --bdc_color:          currentcolor;
+      }
+
+      /* Outline hover */
+      .button.outline:hover,
+      .button.ghost:hover {
+        --button_bg:   var(--button_color);
+        --button_text: var(--button_on-color);
+        --bdc_color:   transparent;
+      }
+    }
+
+    /* Focus visible */
+    .button:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+      border-radius: var(--bds-border_radius--s);
+    }
+
+    /* Disabled */
+    .button:disabled,
+    .button[aria-disabled='true'] {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  `;
+  static properties = {
+    variant: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    href: { type: String },
+    target: { type: String },
+    rel: { type: String },
+    hasPulse: { type: Boolean, attribute: "has-pulse", reflect: true },
+    type: { type: String },
+    ariaLabel: { type: String, attribute: "aria-label" },
+    // Internal state
+    _iconStartFilled: { state: true },
+    _iconEndFilled: { state: true }
+  };
+  constructor() {
+    super();
+    this.variant = "default";
+    this.size = "medium";
+    this.disabled = false;
+    this.hasPulse = false;
+    this.type = "button";
+    this.ariaLabel = null;
+    this._iconStartFilled = false;
+    this._iconEndFilled = false;
+  }
+  _onIconSlotChange(e, position) {
+    const slot = e.target;
+    const filled = slot.assignedNodes({ flatten: true }).length > 0;
+    if (position === "start") {
+      this._iconStartFilled = filled;
+    } else {
+      this._iconEndFilled = filled;
+    }
+  }
+  get _classes() {
+    return `button ${this.variant} ${this.size}${this.hasPulse ? " has-pulse" : ""}`;
+  }
+  _handleAnchorClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+    }
+  }
+  _iconSlot(position) {
+    const filled = position === "start" ? this._iconStartFilled : this._iconEndFilled;
+    return T`
+      <span class="icon-${position} ${filled ? "has-content" : ""}">
+        <slot name="icon-${position}" @slotchange=${(e) => this._onIconSlotChange(e, position)}></slot>
+      </span>
+    `;
+  }
+  render() {
+    if (this.href) {
+      return T`
+        <a
+          class=${this._classes}
+          href=${this.disabled ? A : this.href}
+          target=${this.target ?? A}
+          rel=${this.rel ?? A}
+          aria-disabled=${this.disabled ? "true" : A}
+          tabindex=${this.disabled ? "-1" : A}
+          aria-label=${this.ariaLabel ?? A}
+          @click=${this._handleAnchorClick}
+        >
+          ${this._iconSlot("start")}
+          <slot></slot>
+          ${this._iconSlot("end")}
+        </a>
+      `;
+    }
+    return T`
+      <button
+        class=${this._classes}
+        type=${this.type}
+        ?disabled=${this.disabled}
+        aria-label=${this.ariaLabel ?? A}
+      >
+        ${this._iconSlot("start")}
+        <slot></slot>
+        ${this._iconSlot("end")}
+      </button>
+    `;
+  }
+};
+customElements.define("bds-button", BdsButton);
+
+export {
+  BdsButton
+};

package/dist/web-components/chunk-57TRNCWQ.js

@@ -0,0 +1,93 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-avatar.ts
+var BdsAvatar = class extends i2 {
+  static styles = i`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--avatar_size, 3em);
+      block-size: var(--avatar_size, 3em);
+      border-radius: 50%;
+      overflow: hidden;
+      flex-shrink: 0;
+    }
+
+    :host([size='small'])  { --avatar_size: 2em; }
+    :host([size='medium']) { --avatar_size: 3em; }
+    :host([size='large'])  { --avatar_size: 4.5em; }
+
+    .fallback {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 100%;
+      block-size: 100%;
+      background-color: var(--avatar_bg, var(--bds-color_blue));
+      color: var(--avatar_text, var(--bds-color_on-blue));
+      font-weight: var(--bds-font_weight--semibold);
+    }
+
+    .initials {
+      line-height: 1;
+      user-select: none;
+      font-size: var(--bds-font_size--body);
+    }
+
+    :host([size='small'])  .initials { font-size: var(--bds-font_size--body--s); }
+    :host([size='large'])  .initials { font-size: var(--bds-font_size--heading-3); }
+
+    .image {
+      inline-size: 100%;
+      block-size: 100%;
+      object-fit: cover;
+      display: block;
+    }
+  `;
+  static properties = {
+    src: { type: String },
+    alt: { type: String },
+    name: { type: String },
+    size: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.src = "";
+    this.alt = "";
+    this.name = "";
+    this.size = "medium";
+  }
+  get _initials() {
+    if (!this.name) return "";
+    return this.name.split(" ").filter(Boolean).slice(0, 2).map((word) => word[0].toUpperCase()).join("");
+  }
+  render() {
+    if (this.src) {
+      return T`<img
+        class="image"
+        src=${this.src}
+        alt=${this.alt || this.name || "User avatar"}
+      />`;
+    }
+    return T`
+      <span
+        class="fallback"
+        role="img"
+        aria-label=${this.name || "User avatar"}
+      >
+        ${this._initials ? T`<span class="initials" aria-hidden="true">${this._initials}</span>` : A}
+      </span>
+    `;
+  }
+};
+customElements.define("bds-avatar", BdsAvatar);
+
+export {
+  BdsAvatar
+};

package/dist/web-components/chunk-5IPHEONG.js

@@ -0,0 +1,139 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-collapsible.ts
+var BdsCollapsible = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    .collapsible {
+      border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
+      border-radius: var(--collapsible_border-radius, var(--bds-border_radius--m));
+      overflow: hidden;
+    }
+
+    .summary {
+      list-style: none;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--bds-space_m);
+      padding: var(--bds-space_m);
+      cursor: pointer;
+      font-weight: var(--bds-font_weight--semibold);
+      font-size: var(--bds-font_size--body);
+      color: var(--collapsible_color, var(--bds-color_on-bg));
+      background-color: var(--collapsible_bg, var(--bds-color_bg));
+      user-select: none;
+      transition: var(--bds-animation_transition);
+    }
+
+    .summary::-webkit-details-marker {
+      display: none;
+    }
+
+    .summary:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: calc(var(--bds-outline_offset) * -1);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .summary:hover {
+        background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
+      }
+    }
+
+    .collapsible[open] > .summary {
+      border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
+    }
+
+    .summary-content {
+      flex: 1;
+    }
+
+    .icon {
+      inline-size: 0.5rem;
+      block-size: 0.5rem;
+      border-inline-end: 2px solid currentcolor;
+      border-block-end: 2px solid currentcolor;
+      transform: rotate(45deg);
+      flex-shrink: 0;
+      transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .collapsible[open] > .summary .icon {
+      transform: rotate(-135deg);
+    }
+
+    .content {
+      padding: var(--bds-space_m);
+      color: var(--collapsible_on-color, var(--bds-color_on-bg));
+      font-size: var(--bds-font_size--body);
+      line-height: var(--bds-font_line-height--body);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .icon {
+        transition: none;
+      }
+    }
+  `;
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    name: { type: String }
+  };
+  constructor() {
+    super();
+    this.open = false;
+    this.name = "";
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("name")) {
+      const details = this.shadowRoot?.querySelector("details");
+      if (details) {
+        if (this.name) {
+          details.setAttribute("name", this.name);
+        } else {
+          details.removeAttribute("name");
+        }
+      }
+    }
+  }
+  _onToggle(e) {
+    const details = e.currentTarget;
+    this.open = details.open;
+    this.dispatchEvent(
+      new CustomEvent("bds-toggle", {
+        bubbles: true,
+        composed: true,
+        detail: { open: this.open }
+      })
+    );
+  }
+  render() {
+    return T`
+      <details
+        class="collapsible"
+        ?open=${this.open}
+        @toggle=${this._onToggle}
+      >
+        <summary class="summary">
+          <span class="summary-content"><slot name="summary"></slot></span>
+          <span class="icon" aria-hidden="true"></span>
+        </summary>
+        <div class="content"><slot></slot></div>
+      </details>
+    `;
+  }
+};
+customElements.define("bds-collapsible", BdsCollapsible);
+
+export {
+  BdsCollapsible
+};

package/dist/web-components/chunk-5R6IFELV.js

@@ -0,0 +1,63 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-loading.ts
+var BdsLoading = class extends i2 {
+  static styles = i`
+    :host {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .spinner {
+      inline-size: 2.5em;
+      block-size: 2.5em;
+      border: 4px solid var(--bds-color_bg);
+      border-block-start: 4px solid var(--bds-color_interactive);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    :host([size='small']) .spinner {
+      inline-size: 1.5em;
+      block-size: 1.5em;
+      border-width: 2px;
+    }
+
+    :host([size='large']) .spinner {
+      inline-size: 4em;
+      block-size: 4em;
+      border-width: 6px;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .spinner {
+        animation: none;
+      }
+    }
+  `;
+  static properties = {
+    size: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.size = "medium";
+  }
+  render() {
+    return T`<div class="spinner" role="status" aria-label="Loading"></div>`;
+  }
+};
+customElements.define("bds-loading", BdsLoading);
+
+export {
+  BdsLoading
+};