jvetrau-ds 0.2.13 → 0.2.15

package/components/embed-viewer/embed-viewer.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const embedViewerMeta: ComponentMeta;

package/components/embed-viewer/index.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var embedViewer = require('./embed-viewer');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var embedViewer__default = /*#__PURE__*/_interopDefault(embedViewer);
+
+
+
+Object.defineProperty(exports, "EmbedViewer", {
+  enumerable: true,
+  get: function () { return embedViewer__default.default; }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () { return embedViewer__default.default; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/components/embed-viewer/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs","sourcesContent":[]}

package/components/embed-viewer/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './embed-viewer';
+export { default as EmbedViewer } from './embed-viewer';
+export type { EmbedViewerProps } from './embed-viewer';

package/components/embed-viewer/index.js

@@ -0,0 +1,3 @@
+export { default as EmbedViewer, default } from './embed-viewer';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/embed-viewer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/components/index.cjs

@@ -17,6 +17,7 @@ var progressbar = require('./progressbar/progressbar');
 var card = require('./card/card');
 var panel = require('./panel/panel');
 var video = require('./video/video');
+var embedViewer = require('./embed-viewer');
 var logo = require('./logo/logo');
 var avatar = require('./avatar/avatar');
 var attach = require('./attach/attach');
@@ -49,6 +50,7 @@ var progressbar__default = /*#__PURE__*/_interopDefault(progressbar);
 var card__default = /*#__PURE__*/_interopDefault(card);
 var panel__default = /*#__PURE__*/_interopDefault(panel);
 var video__default = /*#__PURE__*/_interopDefault(video);
+var embedViewer__default = /*#__PURE__*/_interopDefault(embedViewer);
 var logo__default = /*#__PURE__*/_interopDefault(logo);
 var avatar__default = /*#__PURE__*/_interopDefault(avatar);
 var attach__default = /*#__PURE__*/_interopDefault(attach);
@@ -135,6 +137,10 @@ Object.defineProperty(exports, "Video", {
   enumerable: true,
   get: function () { return video__default.default; }
 });
+Object.defineProperty(exports, "EmbedViewer", {
+  enumerable: true,
+  get: function () { return embedViewer__default.default; }
+});
 Object.defineProperty(exports, "Logo", {
   enumerable: true,
   get: function () { return logo__default.default; }

package/components/index.d.ts

@@ -33,12 +33,14 @@ export { default as Panel } from './panel/panel';
 export type { PanelProps } from './panel/panel';
 export { default as Video } from './video/video';
 export type { VideoProps, VideoQuality, } from './video/video';
+export { default as EmbedViewer } from './embed-viewer';
+export type { EmbedViewerProps } from './embed-viewer';
 export { default as Logo } from './logo/logo';
 export type { LogoProps } from './logo/logo';
 export { default as Avatar } from './avatar/avatar';
 export type { AvatarProps } from './avatar/avatar';
 export { default as Attach } from './attach/attach';
-export type { AttachItem, AttachProps, } from './attach/attach';
+export type { AttachItem, AttachItemKind, AttachProps, } from './attach/attach';
 export { default as ActionGroup } from './action-group/action-group';
 export type { ActionGroupProps } from './action-group/action-group';
 export { default as CardGroup } from './card-group/card-group';

package/components/index.js

@@ -15,6 +15,7 @@ export { default as ProgressBar } from './progressbar/progressbar';
 export { default as Card } from './card/card';
 export { default as Panel } from './panel/panel';
 export { default as Video } from './video/video';
+export { default as EmbedViewer } from './embed-viewer';
 export { default as Logo } from './logo/logo';
 export { default as Avatar } from './avatar/avatar';
 export { default as Attach } from './attach/attach';

package/index.cjs

@@ -13,6 +13,7 @@ var formMessage = require('./components/form-message');
 var menu = require('./components/menu');
 var tabs = require('./components/tabs');
 var video = require('./components/video');
+var embedViewer = require('./components/embed-viewer');
 var search = require('./components/search');
 var richedit = require('./components/richedit');
 var tag = require('./components/tag');
@@ -57,6 +58,7 @@ var formMessage__default = /*#__PURE__*/_interopDefault(formMessage);
 var menu__default = /*#__PURE__*/_interopDefault(menu);
 var tabs__default = /*#__PURE__*/_interopDefault(tabs);
 var video__default = /*#__PURE__*/_interopDefault(video);
+var embedViewer__default = /*#__PURE__*/_interopDefault(embedViewer);
 var search__default = /*#__PURE__*/_interopDefault(search);
 var richedit__default = /*#__PURE__*/_interopDefault(richedit);
 var tag__default = /*#__PURE__*/_interopDefault(tag);
@@ -143,6 +145,10 @@ Object.defineProperty(exports, "Video", {
   enumerable: true,
   get: function () { return video__default.default; }
 });
+Object.defineProperty(exports, "EmbedViewer", {
+  enumerable: true,
+  get: function () { return embedViewer__default.default; }
+});
 Object.defineProperty(exports, "Search", {
   enumerable: true,
   get: function () { return search__default.default; }

package/index.d.ts

@@ -28,6 +28,8 @@ export { default as Tabs } from './components/tabs';
 export type { TabItem, TabsProps, } from './components/tabs';
 export { default as Video } from './components/video';
 export type { VideoProps, VideoQuality, } from './components/video';
+export { default as EmbedViewer } from './components/embed-viewer';
+export type { EmbedViewerProps } from './components/embed-viewer';
 export { default as Search } from './components/search';
 export type { SearchProps } from './components/search';
 export { default as RichEdit } from './components/richedit';
@@ -45,7 +47,7 @@ export type { LogoProps } from './components/logo';
 export { default as Avatar } from './components/avatar';
 export type { AvatarProps } from './components/avatar';
 export { default as Attach } from './components/attach';
-export type { AttachItem, AttachProps, } from './components/attach';
+export type { AttachItem, AttachItemKind, AttachProps, } from './components/attach';
 export { default as ActionGroup } from './components/action-group';
 export type { ActionGroupProps } from './components/action-group';
 export { default as CardGroup } from './components/card-group';

package/index.js

@@ -11,6 +11,7 @@ export { default as FormMessage } from './components/form-message';
 export { default as Menu } from './components/menu';
 export { default as Tabs } from './components/tabs';
 export { default as Video } from './components/video';
+export { default as EmbedViewer } from './components/embed-viewer';
 export { default as Search } from './components/search';
 export { default as RichEdit } from './components/richedit';
 export { default as Tag } from './components/tag';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/styles.css

@@ -30,10 +30,9 @@
 .attach {
   /* color */
   --attachment-color: var(--color-text);
-  --attachment-item-bg: var(--color-control);
-  --attachment-item-color: var(--color-text-control);
-  --attachment-border-color: var(--color-line);
-  --attachment-item-meta-color: var(--color-text-note);
+  --attachment-item-bg: var(--color-bg-media);
+  --attachment-item-color: var(--color-text);
+  --attachment-item-meta-color: var(--color-text);
 
   color: var(--attachment-color);
 
@@ -51,15 +50,16 @@
   letter-spacing: var(--attachment-letter-spacing);
 
   /* size */
-  --attachment-gap: var(--margin-control);
-  --attachment-item-gap: var(--margin-icon);
-  --attachment-item-padding: var(--padding-control-vert);
-  --attachment-preview-max-width: 240px;
-  --attachment-preview-max-height: 180px;
+  --attachment-gap: var(--margin-container);
+  --attachment-item-padding: var(--padding-container);
+  --attachment-remove-offset: var(--margin-container);
+  --attachment-aspect-ratio: 9 / 6;
+
+  width: 100%;
+  min-width: 0;
 
   /* border */
-  --attachment-radius: var(--radius-control);
-  --attachment-border-width: var(--size-border-width-base);
+  --attachment-radius: var(--radius-container);
 
   /* depth */
 
@@ -72,9 +72,13 @@
   /* typography */
 
   /* size */
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns:
+    repeat(3, minmax(0, 1fr));
   gap: var(--attachment-gap);
+
+  width: 100%;
+  min-width: 0;
   margin: 0;
   padding: 0;
 
@@ -94,17 +98,14 @@
   /* typography */
 
   /* size */
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--attachment-item-gap);
-  padding: var(--attachment-item-padding);
+  position: relative;
+  min-width: 0;
+  aspect-ratio:
+    var(--attachment-aspect-ratio);
+
+  overflow: hidden;
 
   /* border */
-  border:
-    var(--attachment-border-width)
-    solid
-    var(--attachment-border-color);
   border-radius: var(--attachment-radius);
 
   /* depth */
@@ -120,6 +121,9 @@
   text-decoration: none;
 
   /* size */
+  display: block;
+  width: 100%;
+  height: 100%;
   min-width: 0;
 
   /* border */
@@ -129,6 +133,25 @@
   /* motion */
 }
 
+.attach__item--file .attach__link,
+.attach__item--link .attach__link {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: flex-end;
+
+  padding: var(--attachment-item-padding);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .attach__link:hover .attach__name {
   /* color */
 
@@ -151,12 +174,13 @@
 
   /* size */
   display: block;
-  max-width: var(--attachment-preview-max-width);
-  max-height: var(--attachment-preview-max-height);
-  object-fit: contain;
+
+  width: 100%;
+  height: 100%;
+
+  object-fit: cover;
 
   /* border */
-  border-radius: var(--attachment-radius);
 
   /* depth */
 
@@ -171,6 +195,8 @@
   /* size */
   display: flex;
   flex-direction: column;
+
+  width: 100%;
   min-width: 0;
 
   /* border */
@@ -188,6 +214,8 @@
   white-space: nowrap;
 
   /* size */
+  min-width: 0;
+
   overflow: hidden;
 
   /* border */
@@ -202,7 +230,11 @@
   color: var(--attachment-item-meta-color);
 
   /* typography */
-  font-size: 0.85em;
+  font-family: var(--font-body-family);
+  font-size: var(--font-body);
+  font-weight: var(--font-body-weight);
+  line-height: var(--font-body-line);
+  letter-spacing: var(--font-body-letter-spacing);
 
   /* size */
 
@@ -215,30 +247,28 @@
 
 .attach__remove {
   /* color */
-  background: transparent;
   color: inherit;
 
   /* typography */
-  font: inherit;
 
   /* size */
-  flex-shrink: 0;
-  padding: 0;
+  position: absolute;
+  top: var(--attachment-remove-offset);
+  right: var(--attachment-remove-offset);
+  z-index: 1;
 
   /* border */
-  border: 0;
 
   /* depth */
 
   /* motion */
-  cursor: pointer;
 }
 
-.attach__remove:hover {
+.attach__item--image .attach__remove {
   /* color */
+  color: var(--color-contrast);
 
   /* typography */
-  text-decoration: underline;
 
   /* size */
 
@@ -2554,6 +2584,123 @@
   /* motion */
 }
 
+/* src/components/embed-viewer/embed-viewer.css */
+.embed-viewer {
+  /* color */
+  --embed-viewer-color:
+    var(--color-text);
+  --embed-viewer-frame-bg:
+    var(--color-bg-media);
+
+  color: var(--embed-viewer-color);
+
+  /* typography */
+  --embed-viewer-description-font-family:
+    var(--font-body-family);
+  --embed-viewer-description-font-size:
+    var(--font-body);
+  --embed-viewer-description-font-weight:
+    var(--font-body-weight);
+  --embed-viewer-description-line-height:
+    var(--font-body-line);
+  --embed-viewer-description-letter-spacing:
+    var(--font-body-letter-spacing);
+
+  /* size */
+  --embed-viewer-gap:
+    var(--margin-item);
+  --embed-viewer-frame-aspect-ratio:
+    16 / 9;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--embed-viewer-gap);
+
+  width: 100%;
+  min-width: 0;
+
+  /* border */
+  --embed-viewer-frame-radius:
+    var(--radius-container);
+
+  /* depth */
+
+  /* motion */
+}
+
+.embed-viewer__description {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  font-family:
+    var(--embed-viewer-description-font-family);
+  font-size:
+    var(--embed-viewer-description-font-size);
+  font-weight:
+    var(--embed-viewer-description-font-weight);
+  line-height:
+    var(--embed-viewer-description-line-height);
+  letter-spacing:
+    var(--embed-viewer-description-letter-spacing);
+
+  /* size */
+  min-width: 0;
+  max-width: 100%;
+
+  overflow-wrap: anywhere;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.embed-viewer__frame {
+  /* color */
+  background:
+    var(--embed-viewer-frame-bg);
+
+  /* typography */
+
+  /* size */
+  display: block;
+
+  width: 100%;
+  min-width: 0;
+  aspect-ratio:
+    var(--embed-viewer-frame-aspect-ratio);
+
+  /* border */
+  border: 0;
+  border-radius:
+    var(--embed-viewer-frame-radius);
+
+  /* depth */
+
+  /* motion */
+}
+
+.embed-viewer__actions {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 /* src/components/field/field.css */
 .field {
   /* color */

package/themes/base/desktop.css

@@ -6,6 +6,7 @@
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
+  --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;

package/themes/base/desktop.md

@@ -11,6 +11,7 @@
 | `color/bg/contrast` | `color` | `#FFFFFF` |
 | `color/bg/dark` | `color` | `#0D0D0D` |
 | `color/bg/disabled` | `color` | `#B2B2B2` |
+| `color/bg/media` | `color` | `#4B4C4D` |
 | `color/bg/placeholder` | `color` | `#EBEFF2` |
 | `color/bg/true-black` | `color` | `#000000` |
 | `color/contrast` | `color` | `#FFFFFF` |

package/themes/base/desktop.scoped.css

@@ -6,6 +6,7 @@
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
+  --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;

package/themes/base/diagram.css

@@ -6,6 +6,7 @@
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
+  --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;

package/themes/base/diagram.md

@@ -11,6 +11,7 @@
 | `color/bg/contrast` | `color` | `#FFFFFF` |
 | `color/bg/dark` | `color` | `#0D0D0D` |
 | `color/bg/disabled` | `color` | `#B2B2B2` |
+| `color/bg/media` | `color` | `#4B4C4D` |
 | `color/bg/placeholder` | `color` | `#EBEFF2` |
 | `color/bg/true-black` | `color` | `#000000` |
 | `color/contrast` | `color` | `#FFFFFF` |

package/themes/base/diagram.scoped.css

@@ -6,6 +6,7 @@
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
+  --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;

package/themes/base/mobile.css

@@ -6,6 +6,7 @@
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
+  --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;

package/themes/base/mobile.md

@@ -11,6 +11,7 @@
 | `color/bg/contrast` | `color` | `#FFFFFF` |
 | `color/bg/dark` | `color` | `#0D0D0D` |
 | `color/bg/disabled` | `color` | `#B2B2B2` |
+| `color/bg/media` | `color` | `#4B4C4D` |
 | `color/bg/placeholder` | `color` | `#EBEFF2` |
 | `color/bg/true-black` | `color` | `#000000` |
 | `color/contrast` | `color` | `#FFFFFF` |

package/themes/base/mobile.scoped.css

@@ -6,6 +6,7 @@
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
+  --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;

package/themes/brandcopilot/desktop.css

@@ -6,6 +6,7 @@
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
+  --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;

package/themes/brandcopilot/desktop.md

@@ -11,6 +11,7 @@
 | `color/bg/contrast` | `color` | `#FFFFFF` |
 | `color/bg/dark` | `color` | `#0D0D0D` |
 | `color/bg/disabled` | `color` | `#B2B2B2` |
+| `color/bg/media` | `color` | `#4B4C4D` |
 | `color/bg/placeholder` | `color` | `#EBEFF2` |
 | `color/bg/true-black` | `color` | `#000000` |
 | `color/contrast` | `color` | `#FFFFFF` |

package/themes/brandcopilot/desktop.scoped.css

@@ -6,6 +6,7 @@
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
+  --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;

package/themes/brandcopilot/diagram.css

@@ -6,6 +6,7 @@
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
+  --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;

package/themes/brandcopilot/diagram.md

@@ -11,6 +11,7 @@
 | `color/bg/contrast` | `color` | `#FFFFFF` |
 | `color/bg/dark` | `color` | `#0D0D0D` |
 | `color/bg/disabled` | `color` | `#B2B2B2` |
+| `color/bg/media` | `color` | `#4B4C4D` |
 | `color/bg/placeholder` | `color` | `#EBEFF2` |
 | `color/bg/true-black` | `color` | `#000000` |
 | `color/contrast` | `color` | `#FFFFFF` |

package/themes/brandcopilot/diagram.scoped.css

@@ -6,6 +6,7 @@
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
+  --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;

package/themes/brandcopilot/mobile.css

@@ -6,6 +6,7 @@
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
+  --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;

package/themes/brandcopilot/mobile.md

@@ -11,6 +11,7 @@
 | `color/bg/contrast` | `color` | `#FFFFFF` |
 | `color/bg/dark` | `color` | `#0D0D0D` |
 | `color/bg/disabled` | `color` | `#B2B2B2` |
+| `color/bg/media` | `color` | `#4B4C4D` |
 | `color/bg/placeholder` | `color` | `#EBEFF2` |
 | `color/bg/true-black` | `color` | `#000000` |
 | `color/contrast` | `color` | `#FFFFFF` |

package/themes/brandcopilot/mobile.scoped.css

@@ -6,6 +6,7 @@
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
+  --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;

package/themes/dmpatterns/desktop.css

@@ -6,6 +6,7 @@
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
+  --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;

package/themes/dmpatterns/desktop.md

@@ -11,6 +11,7 @@
 | `color/bg/contrast` | `color` | `#FFFFFF` |
 | `color/bg/dark` | `color` | `#0D0D0D` |
 | `color/bg/disabled` | `color` | `#B2B2B2` |
+| `color/bg/media` | `color` | `#4B4C4D` |
 | `color/bg/placeholder` | `color` | `#EBEFF2` |
 | `color/bg/true-black` | `color` | `#000000` |
 | `color/contrast` | `color` | `#FFFFFF` |

package/themes/dmpatterns/desktop.scoped.css

@@ -6,6 +6,7 @@
   --color-bg-contrast: #FFFFFF;
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
+  --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;