@tessera-ui/core 0.4.0

package/dist/collection/components/divider/divider.js

@@ -0,0 +1,99 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @part base - The divider line element.
+ * @part label - The optional label text.
+ */
+export class TsDivider {
+    /** The divider orientation. */
+    orientation = 'horizontal';
+    /** The line style variant. */
+    variant = 'solid';
+    /** Optional label text displayed in the center of the divider. */
+    label;
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const hasLabel = !!this.label;
+        return (h(Host, { key: '91e1c22fd7f266364aeac8cf9ea6429a5462375d', class: {
+                'ts-divider': true,
+                [`ts-divider--${this.orientation}`]: true,
+                [`ts-divider--${this.variant}`]: true,
+                'ts-divider--has-label': hasLabel,
+            }, role: "separator", "aria-orientation": this.orientation }, hasLabel && this.orientation === 'horizontal' ? (h("div", { class: "divider__base", part: "base" }, h("span", { class: "divider__line divider__line--start" }), h("span", { class: "divider__label", part: "label" }, this.label), h("span", { class: "divider__line divider__line--end" }))) : (h("div", { class: "divider__base", part: "base" }, h("span", { class: "divider__line" })))));
+    }
+    static get is() { return "ts-divider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["divider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["divider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The divider orientation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'solid' | 'dashed' | 'dotted'",
+                    "resolved": "\"dashed\" | \"dotted\" | \"solid\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The line style variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'solid'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional label text displayed in the center of the divider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=divider.js.map

package/dist/collection/components/divider/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/components/divider/divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAMH,MAAM,OAAO,SAAS;IACpB,+BAA+B;IACN,WAAW,GAA8B,YAAY,CAAC;IAE/E,8BAA8B;IACL,OAAO,GAAkC,OAAO,CAAC;IAE1E,kEAAkE;IAC1D,KAAK,CAAU;IAEvB,4EAA4E;IAC5E,MAAM;QACJ,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAE9B,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,CAAC,eAAe,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;gBACzC,CAAC,eAAe,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACrC,uBAAuB,EAAE,QAAQ;aAClC,EACD,IAAI,EAAC,WAAW,sBACE,IAAI,CAAC,WAAW,IAEjC,QAAQ,IAAI,IAAI,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,CAC/C,WAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM;YACpC,YAAM,KAAK,EAAC,oCAAoC,GAAG;YACnD,YAAM,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;YAC7D,YAAM,KAAK,EAAC,kCAAkC,GAAG,CAC7C,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM;YACpC,YAAM,KAAK,EAAC,eAAe,GAAG,CAC1B,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @part base - The divider line element.\n * @part label - The optional label text.\n */\n@Component({\n  tag: 'ts-divider',\n  styleUrl: 'divider.css',\n  shadow: true,\n})\nexport class TsDivider {\n  /** The divider orientation. */\n  @Prop({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** The line style variant. */\n  @Prop({ reflect: true }) variant: 'solid' | 'dashed' | 'dotted' = 'solid';\n\n  /** Optional label text displayed in the center of the divider. */\n  @Prop() label?: string;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const hasLabel = !!this.label;\n\n    return (\n      <Host\n        class={{\n          'ts-divider': true,\n          [`ts-divider--${this.orientation}`]: true,\n          [`ts-divider--${this.variant}`]: true,\n          'ts-divider--has-label': hasLabel,\n        }}\n        role=\"separator\"\n        aria-orientation={this.orientation}\n      >\n        {hasLabel && this.orientation === 'horizontal' ? (\n          <div class=\"divider__base\" part=\"base\">\n            <span class=\"divider__line divider__line--start\" />\n            <span class=\"divider__label\" part=\"label\">{this.label}</span>\n            <span class=\"divider__line divider__line--end\" />\n          </div>\n        ) : (\n          <div class=\"divider__base\" part=\"base\">\n            <span class=\"divider__line\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/divider/divider.stories.js

@@ -0,0 +1,94 @@
+// Hand-written stories for ts-divider
+export default {
+    title: 'Components/Divider',
+    tags: ['autodocs'],
+    argTypes: {
+        orientation: {
+            control: 'select',
+            options: ['horizontal', 'vertical'],
+            description: 'The divider orientation.',
+        },
+        variant: {
+            control: 'select',
+            options: ['solid', 'dashed', 'dotted'],
+            description: 'The line style variant.',
+        },
+        label: {
+            control: 'text',
+            description: 'Optional label text displayed in the center of the divider.',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.orientation !== undefined)
+        attrs.push(`orientation="${args.orientation}"`);
+    if (args.variant !== undefined)
+        attrs.push(`variant="${args.variant}"`);
+    if (args.label !== undefined && args.label !== '')
+        attrs.push(`label="${args.label}"`);
+    return `<ts-divider ${attrs.join(' ')}></ts-divider>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        orientation: 'horizontal',
+        variant: 'solid',
+        label: '',
+    },
+});
+export const Variants = () => `
+  <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Solid</p>
+      <ts-divider variant="solid"></ts-divider>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Dashed</p>
+      <ts-divider variant="dashed"></ts-divider>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Dotted</p>
+      <ts-divider variant="dotted"></ts-divider>
+    </div>
+  </div>
+`;
+export const States = () => `
+  <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Without label</p>
+      <ts-divider></ts-divider>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">With label</p>
+      <ts-divider label="OR"></ts-divider>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Vertical (in flex container)</p>
+      <div style="display: flex; gap: 16px; align-items: center; height: 40px;">
+        <span style="font-family: sans-serif;">Section A</span>
+        <ts-divider orientation="vertical"></ts-divider>
+        <span style="font-family: sans-serif;">Section B</span>
+        <ts-divider orientation="vertical"></ts-divider>
+        <span style="font-family: sans-serif;">Section C</span>
+      </div>
+    </div>
+  </div>
+`;
+export const Composition = () => `
+  <div style="max-width: 400px; font-family: sans-serif;">
+    <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px;">
+      <h4 style="margin: 0 0 12px;">Sign in</h4>
+      <div style="display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px;">
+        <ts-button variant="neutral" appearance="outline" block>Continue with Google</ts-button>
+        <ts-button variant="neutral" appearance="outline" block>Continue with GitHub</ts-button>
+      </div>
+      <ts-divider label="or continue with email"></ts-divider>
+      <div style="margin-top: 16px; display: flex; flex-direction: column; gap: 12px;">
+        <ts-input label="Email" placeholder="you@example.com"></ts-input>
+        <ts-input label="Password" type="password"></ts-input>
+        <ts-button variant="primary" block>Sign in</ts-button>
+      </div>
+    </div>
+  </div>
+`;
+//# sourceMappingURL=divider.stories.js.map

package/dist/collection/components/divider/divider.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.stories.js","sourceRoot":"","sources":["../../../src/components/divider/divider.stories.ts"],"names":[],"mappings":"AAAA,sCAAsC;AAEtC,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;YACnC,WAAW,EAAE,0BAA0B;SACxC;QACD,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC;YACtC,WAAW,EAAE,yBAAyB;SACvC;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,6DAA6D;SAC3E;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;IACpF,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACvF,OAAO,eAAe,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC;AACxD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,WAAW,EAAE,YAAY;QACzB,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,EAAE;KACV;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAerC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;CAqBnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;CAgBxC,CAAC","sourcesContent":["// Hand-written stories for ts-divider\n\nexport default {\n  title: 'Components/Divider',\n  tags: ['autodocs'],\n  argTypes: {\n    orientation: {\n      control: 'select',\n      options: ['horizontal', 'vertical'],\n      description: 'The divider orientation.',\n    },\n    variant: {\n      control: 'select',\n      options: ['solid', 'dashed', 'dotted'],\n      description: 'The line style variant.',\n    },\n    label: {\n      control: 'text',\n      description: 'Optional label text displayed in the center of the divider.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.orientation !== undefined) attrs.push(`orientation=\"${args.orientation}\"`);\n  if (args.variant !== undefined) attrs.push(`variant=\"${args.variant}\"`);\n  if (args.label !== undefined && args.label !== '') attrs.push(`label=\"${args.label}\"`);\n  return `<ts-divider ${attrs.join(' ')}></ts-divider>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    orientation: 'horizontal',\n    variant: 'solid',\n    label: '',\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; max-width: 400px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Solid</p>\n      <ts-divider variant=\"solid\"></ts-divider>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Dashed</p>\n      <ts-divider variant=\"dashed\"></ts-divider>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Dotted</p>\n      <ts-divider variant=\"dotted\"></ts-divider>\n    </div>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; max-width: 400px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Without label</p>\n      <ts-divider></ts-divider>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">With label</p>\n      <ts-divider label=\"OR\"></ts-divider>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Vertical (in flex container)</p>\n      <div style=\"display: flex; gap: 16px; align-items: center; height: 40px;\">\n        <span style=\"font-family: sans-serif;\">Section A</span>\n        <ts-divider orientation=\"vertical\"></ts-divider>\n        <span style=\"font-family: sans-serif;\">Section B</span>\n        <ts-divider orientation=\"vertical\"></ts-divider>\n        <span style=\"font-family: sans-serif;\">Section C</span>\n      </div>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"max-width: 400px; font-family: sans-serif;\">\n    <div style=\"border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px;\">\n      <h4 style=\"margin: 0 0 12px;\">Sign in</h4>\n      <div style=\"display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px;\">\n        <ts-button variant=\"neutral\" appearance=\"outline\" block>Continue with Google</ts-button>\n        <ts-button variant=\"neutral\" appearance=\"outline\" block>Continue with GitHub</ts-button>\n      </div>\n      <ts-divider label=\"or continue with email\"></ts-divider>\n      <div style=\"margin-top: 16px; display: flex; flex-direction: column; gap: 12px;\">\n        <ts-input label=\"Email\" placeholder=\"you@example.com\"></ts-input>\n        <ts-input label=\"Password\" type=\"password\"></ts-input>\n        <ts-button variant=\"primary\" block>Sign in</ts-button>\n      </div>\n    </div>\n  </div>\n`;\n"]}

package/dist/collection/components/drawer/drawer.css

@@ -0,0 +1,202 @@
+/* ==========================================================================
+   ts-drawer — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-drawer-bg          Panel background
+     --ts-drawer-shadow      Panel box-shadow
+     --ts-drawer-overlay-bg  Overlay background
+   ========================================================================== */
+
+:host {
+  font-family: var(--ts-font-family-base);
+
+  --ts-drawer-bg: var(--ts-color-bg-elevated);
+  --ts-drawer-shadow: var(--ts-shadow-xl);
+  --ts-drawer-overlay-bg: var(--ts-color-bg-overlay);
+}
+
+/* ---- Overlay ---- */
+.drawer__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ts-z-modal);
+  background-color: var(--ts-drawer-overlay-bg);
+  animation: ts-drawer-fade-in 200ms ease-out;
+}
+
+/* ---- Panel ---- */
+.drawer__panel {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--ts-drawer-bg);
+  box-shadow: var(--ts-drawer-shadow);
+  outline: none;
+  overflow-y: auto;
+}
+
+/* ---- Placement ---- */
+.drawer__panel--start {
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  animation: ts-drawer-slide-start 250ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.drawer__panel--end {
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  animation: ts-drawer-slide-end 250ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.drawer__panel--top {
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  animation: ts-drawer-slide-top 250ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.drawer__panel--bottom {
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  animation: ts-drawer-slide-bottom 250ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* ---- Sizes — horizontal placement (start/end) ---- */
+.drawer__panel--start.drawer__panel--sm,
+.drawer__panel--end.drawer__panel--sm {
+  inline-size: 320px;
+}
+
+.drawer__panel--start.drawer__panel--md,
+.drawer__panel--end.drawer__panel--md {
+  inline-size: 440px;
+}
+
+.drawer__panel--start.drawer__panel--lg,
+.drawer__panel--end.drawer__panel--lg {
+  inline-size: 640px;
+}
+
+.drawer__panel--start.drawer__panel--full,
+.drawer__panel--end.drawer__panel--full {
+  inline-size: 100%;
+}
+
+/* ---- Sizes — vertical placement (top/bottom) ---- */
+.drawer__panel--top.drawer__panel--sm,
+.drawer__panel--bottom.drawer__panel--sm {
+  block-size: 320px;
+}
+
+.drawer__panel--top.drawer__panel--md,
+.drawer__panel--bottom.drawer__panel--md {
+  block-size: 440px;
+}
+
+.drawer__panel--top.drawer__panel--lg,
+.drawer__panel--bottom.drawer__panel--lg {
+  block-size: 640px;
+}
+
+.drawer__panel--top.drawer__panel--full,
+.drawer__panel--bottom.drawer__panel--full {
+  block-size: 100%;
+}
+
+/* ---- Header ---- */
+.drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--ts-spacing-4) var(--ts-spacing-5);
+  border-block-end: 1px solid var(--ts-color-border-default);
+}
+
+.drawer__title {
+  font-size: var(--ts-font-size-lg);
+  font-weight: var(--ts-font-weight-semi);
+  color: var(--ts-color-text-primary);
+}
+
+/* ---- Close Button ---- */
+.drawer__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  border-radius: var(--ts-radius-md);
+  background: transparent;
+  color: var(--ts-color-text-tertiary);
+  font-size: var(--ts-font-size-md);
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  margin-inline-start: auto;
+  transition:
+    background-color var(--ts-transition-fast),
+    color var(--ts-transition-fast);
+}
+
+.drawer__close:hover {
+  background-color: var(--ts-color-bg-hover);
+  color: var(--ts-color-text-secondary);
+}
+
+.drawer__close:focus-visible {
+  box-shadow: var(--ts-focus-ring);
+}
+
+/* ---- Body ---- */
+.drawer__body {
+  flex: 1;
+  padding: var(--ts-spacing-4) var(--ts-spacing-5);
+  font-size: var(--ts-font-size-md);
+  color: var(--ts-color-text-secondary);
+  line-height: var(--ts-line-height-normal);
+  overflow-y: auto;
+}
+
+/* ---- Footer ---- */
+.drawer__footer {
+  padding: var(--ts-spacing-4) var(--ts-spacing-5);
+  border-block-start: 1px solid var(--ts-color-border-default);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--ts-spacing-2);
+}
+
+.drawer__footer:empty {
+  display: none;
+}
+
+/* ---- Animations ---- */
+@keyframes ts-drawer-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes ts-drawer-slide-start {
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(0); }
+}
+
+@keyframes ts-drawer-slide-end {
+  from { transform: translateX(100%); }
+  to   { transform: translateX(0); }
+}
+
+@keyframes ts-drawer-slide-top {
+  from { transform: translateY(-100%); }
+  to   { transform: translateY(0); }
+}
+
+@keyframes ts-drawer-slide-bottom {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}