ds-one 0.2.5-alpha.8 → 0.3.0-alpha.1

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,31 @@
+/* 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

@@ -0,0 +1,95 @@
+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).
+ *
+ * Usage (with translation text):
+ * <ds-accordion summary="How it began" details="Designed in Hokkaido"></ds-accordion>
+ *
+ * Usage (with slotted details content):
+ * <ds-accordion summary="How it began">
+ *   <div slot="details">Rich HTML content here</div>
+ * </ds-accordion>
+ */
+export class Accordion extends LitElement {
+  static properties = {
+    summary: { type: String },
+    details: { type: String },
+    open: { type: Boolean, reflect: true },
+    _hasSlottedContent: { type: Boolean, state: true },
+  };
+
+  declare summary: string;
+  declare details: string;
+  declare open: boolean;
+  declare _hasSlottedContent: boolean;
+
+  constructor() {
+    super();
+    this.summary = "";
+    this.details = "";
+    this.open = false;
+    this._hasSlottedContent = false;
+  }
+
+  static styles = unsafeCSS(styles);
+
+  private _handleSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    const assignedNodes = slot.assignedNodes({ flatten: true });
+    // Filter out empty text nodes (whitespace only)
+    const hasContent = assignedNodes.some(
+      (node) =>
+        node.nodeType === Node.ELEMENT_NODE ||
+        (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())
+    );
+    this._hasSlottedContent = hasContent;
+  }
+
+  render() {
+    return html`
+      <details ?open=${this.open}>
+        <summary>
+          <ds-row class="summaryRow" type="centered">
+            <ds-text .text=${this.summary}></ds-text>
+            <ds-icon class="chevron" aria-hidden="true">
+              <svg
+                viewBox="0 0 10.157 8.219"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path
+                  d="M5.078 8.219L0 3.141L1.414 1.727L5.078 5.391L8.743 1.727L10.157 3.141L5.078 8.219Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </ds-icon>
+          </ds-row>
+        </summary>
+
+        <div class="detailsBody">
+          <slot name="details" @slotchange=${this._handleSlotChange}></slot>
+          ${!this._hasSlottedContent
+            ? html`<ds-text
+                class="detailsText"
+                .text=${this.details}
+              ></ds-text>`
+            : ""}
+        </div>
+      </details>
+    `;
+  }
+}
+
+customElements.define("ds-accordion", Accordion);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-accordion": Accordion;
+  }
+}