ds-one 0.2.5-alpha.17 → 0.2.5-alpha.19

package/DS1/2-core/ds-text.ts

@@ -1,5 +1,6 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
 import { getText, currentLanguage } from "../0-face/i18n";
+import styles from "./styles/ds-text.css?inline";
 
 /**
  * A component for displaying text from translations
@@ -46,34 +47,7 @@ export class Text extends LitElement {
     };
   }
 
-  static styles = css`
-    :host {
-      display: inline;
-      font-family: var(--typeface-regular);
-      font-size: var(--type-size-default);
-      font-weight: var(--type-weight-default);
-      line-height: calc(var(--type-lineheight-default) * var(--sf));
-      letter-spacing: calc(var(--type-letterspacing-default) * var(--sf));
-      text-align: var(--text-align-default);
-      text-transform: var(--text-transform-default);
-      text-decoration: var(--text-decoration-default);
-    }
-
-    :host([data-language="ja"]) {
-      font-family: var(--typeface-regular-jp);
-    }
-
-    :host([data-language="zh"]),
-    :host([data-language="zh-hant"]) {
-      font-family: var(--typeface-regular-zh-hant);
-      font-weight: 800;
-    }
-
-    :host([data-language="zh-hans"]) {
-      font-family: var(--typeface-regular-zh-hans);
-      font-weight: 800;
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   connectedCallback() {
     super.connectedCallback();

package/DS1/2-core/ds-tooltip.ts

@@ -1,5 +1,6 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
 import { translate } from "../0-face/i18n";
+import styles from "./styles/ds-tooltip.css?inline";
 
 export class Tooltip extends LitElement {
   static properties = {
@@ -61,54 +62,7 @@ export class Tooltip extends LitElement {
     };
   }
 
-  static styles = css`
-    :host {
-      position: relative;
-      display: inline-block;
-    }
-
-    .slot-wrapper {
-      display: inline-flex;
-      align-items: center;
-    }
-
-    .bubble {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: absolute;
-      left: 50%;
-      bottom: 100%;
-      transform: translate(-50%, calc(-2px * var(--sf)));
-      z-index: 1000;
-      pointer-events: none;
-      height: calc(var(--08) * var(--sf));
-      opacity: 0;
-      transition:
-        opacity 120ms ease,
-        transform 120ms ease;
-      background-color: light-dark(var(--black), var(--white));
-      color: light-dark(var(--white), var(--black));
-      border-radius: 0;
-      font-size: var(--type-size-default);
-      padding: 0px calc(1px * var(--sf));
-      font-family: var(
-        --typeface-regular,
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        Roboto,
-        sans-serif
-      );
-      font-weight: 500;
-      white-space: nowrap;
-      min-width: max-content;
-    }
-
-    .bubble.visible {
-      opacity: 1;
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   connectedCallback(): void {
     super.connectedCallback();

package/DS1/2-core/styles/ds-banner.css

@@ -0,0 +1,77 @@
+/* ds-banner.css */
+/* Fixed banner component styles for notifications/alerts */
+
+:host {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: calc(var(--unit) * var(--sf, 1));
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 calc(var(--unit) * var(--sf, 1));
+  box-sizing: border-box;
+  z-index: 9999;
+}
+
+:host([variant="warning"]) {
+  background-color: color-mix(in srgb, var(--yellow) 50%, transparent);
+  --banner-text-color: color-mix(in srgb, var(--black) 50%, transparent);
+  --banner-action-color: var(--slate);
+}
+
+:host([variant="info"]) {
+  background-color: rgba(var(--sharp-blue-rgb, 0, 122, 255), 0.7);
+  --banner-text-color: var(--white, #fff);
+  --banner-action-color: var(--white, #fff);
+}
+
+:host([variant="success"]) {
+  background-color: rgba(var(--apple-green-rgb, 52, 199, 89), 0.7);
+  --banner-text-color: var(--white, #fff);
+  --banner-action-color: var(--white, #fff);
+}
+
+:host([variant="error"]) {
+  background-color: rgba(var(--tuned-red-rgb, 255, 59, 48), 0.7);
+  --banner-text-color: var(--white, #fff);
+  --banner-action-color: var(--slate, #1e1e1e);
+}
+
+.text-wrapper {
+  flex: 1;
+  cursor: pointer;
+  user-select: none;
+}
+
+.text-wrapper ds-text,
+.text-wrapper .version {
+  color: var(--banner-text-color);
+}
+
+.action-wrapper {
+  font-size: calc(12px * var(--sf, 1));
+}
+
+.action-wrapper a {
+  color: var(--banner-action-color);
+  text-decoration: none;
+  font-family: var(--typeface-regular);
+  font-size: calc(12px * var(--sf, 1));
+  cursor: pointer;
+  pointer-events: auto;
+  display: inline-block;
+}
+
+.action-wrapper a:hover {
+  opacity: 0.8;
+}
+
+.action-wrapper ds-text {
+  color: var(--banner-action-color);
+  font-family: var(--typeface-regular);
+  font-size: calc(12px * var(--sf, 1));
+  pointer-events: none;
+}

package/DS1/2-core/styles/ds-button.css

@@ -0,0 +1,67 @@
+/* ds-button.css */
+/* Core button component styles */
+
+button {
+  max-height: calc(var(--08) * var(--sf));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  padding: 0 calc(0.5px * var(--sf));
+  color: var(--button-text-color);
+  font-family: var(--typeface-regular);
+}
+
+button.title {
+  background-color: var(--button-background-color-secondary);
+  color: var(--button-text-color);
+}
+
+button.primary {
+  background-color: var(--accent-color);
+  color: var(--button-text-color);
+  text-decoration-line: none;
+  font-family: var(--typeface-regular);
+}
+
+button.secondary {
+  background-color: var(--button-background-color-secondary);
+  color: var(--button-text-color);
+  font-family: var(--typeface-regular);
+}
+
+button.text {
+  background-color: transparent;
+  color: var(--button-color, var(--button-text-color));
+  font-family: var(--typeface-regular);
+  padding: 0;
+  text-decoration: none;
+}
+
+button.text:hover {
+  opacity: 0.8;
+  text-decoration: none;
+}
+
+button[bold] {
+  font-weight: var(--type-weight-bold);
+  font-family: var(--typeface-medium);
+}
+
+button[no-background] {
+  background-color: transparent;
+  max-height: var(--1);
+  padding: 0;
+  color: var(--button-color, var(--button-text-color-secondary));
+}
+
+button[no-background][bold] {
+  font-weight: var(--type-weight-bold);
+  font-family: var(--typeface-medium);
+  color: var(--button-color, var(--button-text-color-secondary));
+}
+
+.loading {
+  opacity: 0.7;
+}

package/DS1/2-core/styles/ds-cycle.css

@@ -0,0 +1,21 @@
+/* ds-cycle.css */
+/* Cycle component styles for cycling through options */
+
+:host {
+  display: inline-flex;
+  align-items: center;
+}
+
+.cycle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--025);
+}
+
+.color-preview {
+  width: var(--05);
+  height: var(--05);
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--text-color-primary) 20%, transparent);
+  flex: 0 0 auto;
+}

package/DS1/2-core/styles/ds-date.css

@@ -0,0 +1,9 @@
+/* ds-date.css */
+/* Date component styles for displaying the current year */
+
+:host {
+  display: inline;
+  font-family: var(--typeface-regular, var(--typeface-regular-regular));
+  font-size: inherit;
+  color: inherit;
+}

package/DS1/2-core/styles/ds-gap.css

@@ -0,0 +1,93 @@
+/* ds-gap.css */
+/* Full-width vertical spacer styles */
+
+:host {
+  display: block;
+  width: 100%;
+  /* Default if no attribute is provided */
+  --gap-size: var(--unit);
+  height: var(--gap-size);
+  flex: 0 0 auto;
+}
+
+/* Semantic sizing tokens (from DS1/1-root/one.css) */
+:host([tenth]) {
+  --gap-size: var(--tenth);
+}
+
+:host([quarter]) {
+  --gap-size: var(--quarter);
+}
+
+:host([half]) {
+  --gap-size: var(--half);
+}
+
+:host([eight-tenth]) {
+  --gap-size: var(--eight-tenth);
+}
+
+:host([unit]) {
+  --gap-size: var(--unit);
+}
+
+:host([double]) {
+  --gap-size: var(--double);
+}
+
+:host([triple]) {
+  --gap-size: var(--triple);
+}
+
+:host([quad]) {
+  --gap-size: var(--quad);
+}
+
+:host([oct]) {
+  --gap-size: var(--oct);
+}
+
+:host([dozen]) {
+  --gap-size: var(--dozen);
+}
+
+/* Raw scale sizing (size="...") */
+:host([size="01"]) {
+  --gap-size: var(--01);
+}
+
+:host([size="025"]) {
+  --gap-size: var(--025);
+}
+
+:host([size="05"]) {
+  --gap-size: var(--05);
+}
+
+:host([size="08"]) {
+  --gap-size: var(--08);
+}
+
+:host([size="1"]) {
+  --gap-size: var(--1);
+}
+
+:host([size="2"]) {
+  --gap-size: var(--2);
+}
+
+:host([size="3"]) {
+  --gap-size: var(--3);
+}
+
+:host([size="4"]) {
+  --gap-size: var(--4);
+}
+
+:host([size="8"]) {
+  --gap-size: var(--8);
+}
+
+:host([size="12"]) {
+  --gap-size: var(--12);
+}

package/DS1/2-core/styles/ds-icon.css

@@ -0,0 +1,30 @@
+/* ds-icon.css */
+/* Icon component styles */
+
+:host {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: calc(16px * var(--sf));
+  height: calc(16px * var(--sf));
+  /* Notes style color variable for future implementation */
+  --notes-style-color: #ffb6b9;
+}
+
+svg {
+  width: 100%;
+  height: 100%;
+  fill: var(--icon-color, currentColor);
+}
+
+path {
+  fill: var(--icon-color, currentColor);
+}
+
+.icon-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: calc(16px * var(--sf));
+  height: calc(16px * var(--sf));
+}

package/DS1/2-core/styles/ds-input.css

@@ -0,0 +1,46 @@
+/* ds-input.css */
+/* Input component styles */
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+input {
+  background: var(--base-light-grey, #e8e8e8);
+  border: none;
+  padding: 0 calc(2px * var(--sf, 1));
+  border-radius: 4px;
+  font-size: var(--type-size-default);
+  font-family: var(
+    --typeface-regular,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif
+  );
+  color: var(--base-darker-grey, #797979);
+  line-height: calc(20px * var(--sf, 1));
+  letter-spacing: calc(-0.4px * var(--sf, 1));
+  opacity: 0.5;
+  height: calc(28px * var(--sf, 1));
+  width: 100%;
+  box-sizing: border-box;
+}
+
+input:focus {
+  outline: none;
+  opacity: 1;
+  color: var(--base-slate, #1e1e1e);
+}
+
+input::placeholder {
+  color: var(--base-darker-grey, #797979);
+  opacity: 0.5;
+}
+
+input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

package/DS1/2-core/styles/ds-pagedots.css

@@ -0,0 +1,27 @@
+/* ds-pagedots.css */
+/* Page dots indicator component styles for carousels and pagination */
+
+:host {
+  display: flex;
+  gap: calc(11.2px * var(--sf, 1));
+  justify-content: center;
+  align-items: center;
+  height: calc(28px * var(--sf, 1));
+}
+
+.dot {
+  width: calc(2.8px * var(--sf, 1));
+  height: calc(2.8px * var(--sf, 1));
+  border-radius: 50%;
+  background: white;
+  border: calc(0.7px * var(--sf, 1)) solid #696969;
+  transition: background 0.2s ease, border 0.2s ease;
+}
+
+.dot.active {
+  background: #666;
+  border: none;
+}
+
+
+

package/DS1/2-core/styles/ds-text.css

@@ -0,0 +1,29 @@
+/* ds-text.css */
+/* Text component styles for displaying translations */
+
+:host {
+  display: inline;
+  font-family: var(--typeface-regular);
+  font-size: var(--type-size-default);
+  font-weight: var(--type-weight-default);
+  line-height: calc(var(--type-lineheight-default) * var(--sf));
+  letter-spacing: calc(var(--type-letterspacing-default) * var(--sf));
+  text-align: var(--text-align-default);
+  text-transform: var(--text-transform-default);
+  text-decoration: var(--text-decoration-default);
+}
+
+:host([data-language="ja"]) {
+  font-family: var(--typeface-regular-jp);
+}
+
+:host([data-language="zh"]),
+:host([data-language="zh-hant"]) {
+  font-family: var(--typeface-regular-zh-hant);
+  font-weight: 800;
+}
+
+:host([data-language="zh-hans"]) {
+  font-family: var(--typeface-regular-zh-hans);
+  font-weight: 800;
+}

package/DS1/2-core/styles/ds-tooltip.css

@@ -0,0 +1,49 @@
+/* ds-tooltip.css */
+/* Tooltip component styles */
+
+:host {
+  position: relative;
+  display: inline-block;
+}
+
+.slot-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+.bubble {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  transform: translate(-50%, calc(-2px * var(--sf)));
+  z-index: 1000;
+  pointer-events: none;
+  height: calc(var(--08) * var(--sf));
+  opacity: 0;
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+  background-color: light-dark(var(--black), var(--white));
+  color: light-dark(var(--white), var(--black));
+  border-radius: 0;
+  font-size: var(--type-size-default);
+  padding: 0px calc(1px * var(--sf));
+  font-family: var(
+    --typeface-regular,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif
+  );
+  font-weight: 500;
+  white-space: nowrap;
+  min-width: max-content;
+}
+
+.bubble.visible {
+  opacity: 1;
+}

package/DS1/3-unit/ds-accordion.ts

@@ -1,7 +1,8 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
 import "../2-core/ds-text";
 import "../2-core/ds-icon";
 import "./ds-row";
+import styles from "./styles/ds-accordion.css?inline";
 
 /**
  * Native accordion using <details>/<summary> (no JS toggle logic).
@@ -27,51 +28,7 @@ export class Accordion extends LitElement {
     this.open = false;
   }
 
-  static styles = css`
-    :host {
-      display: block;
-      width: calc(240px * var(--sf));
-      color: var(--text-color-primary);
-    }
-
-    details {
-      width: 100%;
-    }
-
-    summary {
-      cursor: pointer;
-      user-select: none;
-      list-style: none;
-      outline: none;
-    }
-
-    summary::-webkit-details-marker {
-      display: none;
-    }
-
-    .summaryRow {
-      width: 100%;
-    }
-
-    ds-icon.chevron {
-      transform: rotate(0deg);
-      transition: transform 140ms ease;
-    }
-
-    details[open] ds-icon.chevron {
-      transform: rotate(180deg);
-    }
-
-    .detailsBody {
-      padding-top: calc(var(--half) * var(--sf));
-    }
-
-    .detailsText {
-      display: block;
-      white-space: normal;
-      text-align: left;
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   render() {
     return html`