@qaecy/cue-ui 0.0.1 → 0.0.4

package/README.md

@@ -7,7 +7,9 @@ Drop them into any HTML page — no build step required.
 
 | Custom element          | Import path                     | Description                                                                       |
 | ----------------------- | ------------------------------- | --------------------------------------------------------------------------------- |
+| `<cue-card>`            | `@qaecy/cue-ui/card`            | Reusable card container with variants, padding, and optional shadow               |
 | `<cue-logo>`            | `@qaecy/cue-ui/logo`            | Animated QAECY logo                                                               |
+| `<cue-document-list>`   | `@qaecy/cue-ui/document-list`   | Lazy document list that fetches metadata internally from Cue SDK state            |
 | `<cue-document-viewer>` | `@qaecy/cue-ui/document-viewer` | Document viewer with Cue SDK integration (PDF, BIM, CAD, images, spreadsheets, …) |
 
 ---
@@ -76,7 +78,6 @@ Both components and the Cue SDK are available on [jsDelivr](https://www.jsdelivr
                     viewer.cue = cue;
                     viewer.uuid = 'your-document-uuid'; // or 'uuid?page=3' to open at a page
                     viewer.projectId = 'your-project-id';
-                    viewer.language = 'en'; // optional, default 'en'
 
                     document.getElementById('viewer-host').appendChild(viewer);
                 });
@@ -119,6 +120,35 @@ Renders the animated QAECY logo. Adapts automatically to light/dark mode.
 
 ---
 
+## `<cue-card>`
+
+Renders the core Cue card container as a standalone web component.
+
+| Property / attribute | Type                                                          | Default     | Description                       |
+| -------------------- | ------------------------------------------------------------- | ----------- | --------------------------------- |
+| `variant`            | `'default' \| 'primary' \| 'secondary' \| 'accent' \| 'fade'` | `'default'` | Visual variant                    |
+| `padded`             | `boolean`                                                     | `true`      | Adds internal card padding        |
+| `shadow`             | `boolean`                                                     | `false`     | Adds drop shadow                  |
+| `scrollable`         | `boolean`                                                     | `false`     | Enables internal scroll container |
+| `maxHeight`          | `string`                                                      | `undefined` | Max host height, e.g. `'320px'`   |
+| `style`              | `string`                                                      | `''`        | Additional inline style string    |
+
+```html
+<cue-card variant="primary" padded="true" shadow="true" style="height: 180px;">
+    Card content
+</cue-card>
+```
+
+> **Script tags needed**
+>
+> ```html
+> <script src="https://cdn.jsdelivr.net/npm/@qaecy/cue-ui/card/polyfills.js"></script>
+> <script src="https://cdn.jsdelivr.net/npm/@qaecy/cue-ui/card/main.js"></script>
+> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@qaecy/cue-ui/card/styles.css" />
+> ```
+
+---
+
 ## `<cue-document-viewer>`
 
 Fetches and renders a Cue document. Automatically picks the best viewer based on the file type. Requires an authenticated `Cue` SDK instance.
@@ -128,7 +158,9 @@ Fetches and renders a Cue document. Automatically picks the best viewer based on
 | `cue`       | `Cue` (SDK instance) | ✅       | Authenticated Cue SDK instance. **Set as a JS property**, not an HTML attribute.     |
 | `uuid`      | `string`             | ✅       | Document UUID. Append `?page=N` to open at a specific page, e.g. `'abc-123?page=5'`. |
 | `projectId` | `string`             | ✅       | Cue project (space) ID the document belongs to.                                      |
-| `language`  | `string`             | —        | BCP-47 language code for label resolution. Defaults to `'en'`.                       |
+
+Language is managed globally by the SDK via `cue.api.language` / `cue.api.setLanguage(lang)` and applies to all language-sensitive requests.
+Document metadata caching is also managed by the SDK; the component reuses SDK-owned per-project document state automatically.
 
 Supported file types: PDF, IFC/BIM, DXF/CAD, images (PNG, JPG, SVG, …), Markdown, plain text, CSV/XLSX spreadsheets.
 
@@ -145,6 +177,64 @@ Supported file types: PDF, IFC/BIM, DXF/CAD, images (PNG, JPG, SVG, …), Markdo
 
 ---
 
+## `<cue-document-list>`
+
+Renders a lazy-loaded document table. Pass a `projectId`, `uuids`, and `sdkState`; the component requests metadata and categories internally.
+
+| Property                         | Type                                                                  | Required | Description                                                                            |
+| -------------------------------- | --------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------- |
+| `projectId`                      | `string`                                                              | ✅       | Cue project (space) ID.                                                                |
+| `uuids`                          | `string[]`                                                            | ✅       | Document UUIDs to display.                                                             |
+| `sdkState`                       | `{ cue?; view?; documents?; language?; availableContentCategories? }` | ✅       | SDK context. Provide at least one of `cue`, `view`, or `documents`.                    |
+| `simple`                         | `boolean`                                                             | ❌       | Renders a compact list + paginator instead of ag-grid/flip/settings. Default: `false`. |
+| `pageSize`                       | `number`                                                              | ❌       | Host-controlled page size used by both simple and non-simple modes. Default: `10`.     |
+| `prefetchPages`                  | `number`                                                              | ❌       | Lazy-load buffer size multiplier (`pageSize * prefetchPages`). Default: `3`.           |
+| `showOpenInDocumentViewerAction` | `boolean`                                                             | ❌       | Shows "Open in document viewer" menu item. Default: `false`.                           |
+| `showOpenInFileManagerAction`    | `boolean`                                                             | ❌       | Shows "Open in file manager" menu item. Default: `false`.                              |
+| `customMenuItems`                | `Array<{ label; icon?; action }>`                                     | ❌       | Custom context-menu entries appended after the standard menu items.                    |
+
+By default, only the `Download` action is shown in the row context menu.
+
+Set `simple = true` for a narrow sidebar-style document list (no ag-grid, no column settings, no flip card).
+
+The component emits the same row click outputs as the internal document list (`clickedDocument`, `clickedDownloadDocument`, `clickedOpen`, `clickedOpenInDir`).
+
+Custom menu items are appended after the standard ones:
+
+```js
+const list = document.querySelector('cue-document-list');
+
+list.customMenuItems = [
+    {
+        label: 'Copy UUID',
+        icon: 'copy',
+        action: (document) => {
+            navigator.clipboard.writeText(document.id);
+        },
+    },
+    {
+        label: 'Log Row',
+        icon: 'document',
+        action: (document, cell) => {
+            console.log('Document:', document, 'Cell data:', cell);
+        },
+    },
+];
+```
+
+> **Script tags needed**
+>
+> ```html
+> <script src="https://cdn.jsdelivr.net/npm/@qaecy/cue-ui/document-list/polyfills.js"></script>
+> <script src="https://cdn.jsdelivr.net/npm/@qaecy/cue-ui/document-list/main.js"></script>
+> <link
+>     rel="stylesheet"
+>     href="https://cdn.jsdelivr.net/npm/@qaecy/cue-ui/document-list/styles.css"
+> />
+> ```
+
+---
+
 ## Dependency: `@qaecy/cue-sdk`
 
 The `cue-document-viewer` component requires an authenticated [`Cue`](https://www.npmjs.com/package/@qaecy/cue-sdk) instance. The SDK handles authentication and all data fetching — the component itself never makes direct network calls.
@@ -164,6 +254,7 @@ npm install @qaecy/cue-sdk @qaecy/cue-ui
 
 ```js
 import { Cue } from '@qaecy/cue-sdk';
+import '@qaecy/cue-ui/card';
 import '@qaecy/cue-ui/document-viewer';
 import '@qaecy/cue-ui/logo';
 ```

package/card/3rdpartylicenses.txt

@@ -0,0 +1,443 @@
+@angular/common
+MIT
+The MIT License
+
+Copyright (c) 2010-2026 Google LLC. https://angular.dev/license
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+
+@angular/core
+MIT
+The MIT License
+
+Copyright (c) 2010-2026 Google LLC. https://angular.dev/license
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+
+@angular/elements
+MIT
+The MIT License
+
+Copyright (c) 2010-2026 Google LLC. https://angular.dev/license
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+
+@angular/platform-browser
+MIT
+The MIT License
+
+Copyright (c) 2010-2026 Google LLC. https://angular.dev/license
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+
+@fontsource/poppins
+OFL-1.1
+Google Inc.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+
+
+cue-ui
+
+rxjs
+Apache-2.0
+                               Apache License
+                         Version 2.0, January 2004
+                      http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+    "License" shall mean the terms and conditions for use, reproduction,
+    and distribution as defined by Sections 1 through 9 of this document.
+
+    "Licensor" shall mean the copyright owner or entity authorized by
+    the copyright owner that is granting the License.
+
+    "Legal Entity" shall mean the union of the acting entity and all
+    other entities that control, are controlled by, or are under common
+    control with that entity. For the purposes of this definition,
+    "control" means (i) the power, direct or indirect, to cause the
+    direction or management of such entity, whether by contract or
+    otherwise, or (ii) ownership of fifty percent (50%) or more of the
+    outstanding shares, or (iii) beneficial ownership of such entity.
+
+    "You" (or "Your") shall mean an individual or Legal Entity
+    exercising permissions granted by this License.
+
+    "Source" form shall mean the preferred form for making modifications,
+    including but not limited to software source code, documentation
+    source, and configuration files.
+
+    "Object" form shall mean any form resulting from mechanical
+    transformation or translation of a Source form, including but
+    not limited to compiled object code, generated documentation,
+    and conversions to other media types.
+
+    "Work" shall mean the work of authorship, whether in Source or
+    Object form, made available under the License, as indicated by a
+    copyright notice that is included in or attached to the work
+    (an example is provided in the Appendix below).
+
+    "Derivative Works" shall mean any work, whether in Source or Object
+    form, that is based on (or derived from) the Work and for which the
+    editorial revisions, annotations, elaborations, or other modifications
+    represent, as a whole, an original work of authorship. For the purposes
+    of this License, Derivative Works shall not include works that remain
+    separable from, or merely link (or bind by name) to the interfaces of,
+    the Work and Derivative Works thereof.
+
+    "Contribution" shall mean any work of authorship, including
+    the original version of the Work and any modifications or additions
+    to that Work or Derivative Works thereof, that is intentionally
+    submitted to Licensor for inclusion in the Work by the copyright owner
+    or by an individual or Legal Entity authorized to submit on behalf of
+    the copyright owner. For the purposes of this definition, "submitted"
+    means any form of electronic, verbal, or written communication sent
+    to the Licensor or its representatives, including but not limited to
+    communication on electronic mailing lists, source code control systems,
+    and issue tracking systems that are managed by, or on behalf of, the
+    Licensor for the purpose of discussing and improving the Work, but
+    excluding communication that is conspicuously marked or otherwise
+    designated in writing by the copyright owner as "Not a Contribution."
+
+    "Contributor" shall mean Licensor and any individual or Legal Entity
+    on behalf of whom a Contribution has been received by Licensor and
+    subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    copyright license to reproduce, prepare Derivative Works of,
+    publicly display, publicly perform, sublicense, and distribute the
+    Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    (except as stated in this section) patent license to make, have made,
+    use, offer to sell, sell, import, and otherwise transfer the Work,
+    where such license applies only to those patent claims licensable
+    by such Contributor that are necessarily infringed by their
+    Contribution(s) alone or by combination of their Contribution(s)
+    with the Work to which such Contribution(s) was submitted. If You
+    institute patent litigation against any entity (including a
+    cross-claim or counterclaim in a lawsuit) alleging that the Work
+    or a Contribution incorporated within the Work constitutes direct
+    or contributory patent infringement, then any patent licenses
+    granted to You under this License for that Work shall terminate
+    as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+    Work or Derivative Works thereof in any medium, with or without
+    modifications, and in Source or Object form, provided that You
+    meet the following conditions:
+
+    (a) You must give any other recipients of the Work or
+        Derivative Works a copy of this License; and
+
+    (b) You must cause any modified files to carry prominent notices
+        stating that You changed the files; and
+
+    (c) You must retain, in the Source form of any Derivative Works
+        that You distribute, all copyright, patent, trademark, and
+        attribution notices from the Source form of the Work,
+        excluding those notices that do not pertain to any part of
+        the Derivative Works; and
+
+    (d) If the Work includes a "NOTICE" text file as part of its
+        distribution, then any Derivative Works that You distribute must
+        include a readable copy of the attribution notices contained
+        within such NOTICE file, excluding those notices that do not
+        pertain to any part of the Derivative Works, in at least one
+        of the following places: within a NOTICE text file distributed
+        as part of the Derivative Works; within the Source form or
+        documentation, if provided along with the Derivative Works; or,
+        within a display generated by the Derivative Works, if and
+        wherever such third-party notices normally appear. The contents
+        of the NOTICE file are for informational purposes only and
+        do not modify the License. You may add Your own attribution
+        notices within Derivative Works that You distribute, alongside
+        or as an addendum to the NOTICE text from the Work, provided
+        that such additional attribution notices cannot be construed
+        as modifying the License.
+
+    You may add Your own copyright statement to Your modifications and
+    may provide additional or different license terms and conditions
+    for use, reproduction, or distribution of Your modifications, or
+    for any such Derivative Works as a whole, provided Your use,
+    reproduction, and distribution of the Work otherwise complies with
+    the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+    any Contribution intentionally submitted for inclusion in the Work
+    by You to the Licensor shall be under the terms and conditions of
+    this License, without any additional terms or conditions.
+    Notwithstanding the above, nothing herein shall supersede or modify
+    the terms of any separate license agreement you may have executed
+    with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+    names, trademarks, service marks, or product names of the Licensor,
+    except as required for reasonable and customary use in describing the
+    origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+    agreed to in writing, Licensor provides the Work (and each
+    Contributor provides its Contributions) on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+    implied, including, without limitation, any warranties or conditions
+    of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+    PARTICULAR PURPOSE. You are solely responsible for determining the
+    appropriateness of using or redistributing the Work and assume any
+    risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+    whether in tort (including negligence), contract, or otherwise,
+    unless required by applicable law (such as deliberate and grossly
+    negligent acts) or agreed to in writing, shall any Contributor be
+    liable to You for damages, including any direct, indirect, special,
+    incidental, or consequential damages of any character arising as a
+    result of this License or out of the use or inability to use the
+    Work (including but not limited to damages for loss of goodwill,
+    work stoppage, computer failure or malfunction, or any and all
+    other commercial damages or losses), even if such Contributor
+    has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+    the Work or Derivative Works thereof, You may choose to offer,
+    and charge a fee for, acceptance of support, warranty, indemnity,
+    or other liability obligations and/or rights consistent with this
+    License. However, in accepting such obligations, You may act only
+    on Your own behalf and on Your sole responsibility, not on behalf
+    of any other Contributor, and only if You agree to indemnify,
+    defend, and hold each Contributor harmless for any liability
+    incurred by, or claims asserted against, such Contributor by reason
+    of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+    To apply the Apache License to your work, attach the following
+    boilerplate notice, with the fields enclosed by brackets "[]"
+    replaced with your own identifying information. (Don't include
+    the brackets!)  The text should be enclosed in the appropriate
+    comment syntax for the file format. We also recommend that a
+    file or class name and description of purpose be included on the
+    same "printed page" as the copyright notice for easier
+    identification within third-party archives.
+
+ Copyright (c) 2015-2018 Google, Inc., Netflix, Inc., Microsoft Corp. and contributors
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ 
+
+
+tslib
+0BSD
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+
+zone.js
+MIT
+The MIT License
+
+Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/card/index.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en" data-beasties-container>
+    <head>
+        <meta charset="utf-8">
+        <title>Cue - Card</title>
+        <base href="./">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+        <script src="runtime.js" type="module"></script>
+        <script src="polyfills.js" type="module"></script>
+        <script src="main.js" type="module"></script>
+
+        <style>
+            body {
+                margin: 0;
+                padding: 24px;
+                background: #f5f6f9;
+                font-family: Poppins, system-ui, sans-serif;
+            }
+
+            .stack {
+                max-width: 520px;
+                display: grid;
+                gap: 12px;
+            }
+
+            cue-card {
+                display: block;
+            }
+        </style>
+    <style>@font-face{font-family:Poppins;font-style:normal;font-display:swap;font-weight:400;src:url(poppins-latin-ext-400-normal.woff2) format("woff2"),url(poppins-latin-ext-400-normal.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-display:swap;font-weight:400;src:url(poppins-latin-400-normal.woff2) format("woff2"),url(poppins-latin-400-normal.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--agent-plan-edge-default:var(--cue-color-lightgray);--agent-plan-edge-running:var(--cue-color-blue);--agent-plan-edge-finished:var(--cue-color-blue);--agent-plan-node-active-outline:var(--cue-color-blue);--agent-plan-node-finished-box-shadow:0 0 12px var(--cue-color-green)}:root{--cue-font-family:"Poppins";--cue-font-weight-regular:400;--cue-font-weight-medium:500;--cue-font-weight-semibold:600;--cue-font-xs-size:56.25% ;--cue-font-xs-line-height:calc(16 / 11);--cue-font-xs-letter-spacing:.075em;--cue-font-s-size:68.75% ;--cue-font-s-line-height:calc(16 / 11);--cue-font-s-letter-spacing:.05em;--cue-font-m-size:87.5% ;--cue-font-m-line-height:calc(20 / 14);--cue-font-m-letter-spacing:.04em;--cue-font-l-size:112.5% ;--cue-font-l-line-height:calc(24 / 18);--cue-font-l-letter-spacing:.01em;--cue-font-xl-size:150% ;--cue-font-xl-line-height:calc(32 / 24);--cue-font-xl-letter-spacing:.01em}:root{--cue-color-blue:#2859e1;--cue-color-darkblue:#1744c2;--cue-color-ultralightgray:#f5f6f9;--cue-color-lightgray:#d9d9d9;--cue-color-midgray:#8394b0;--cue-color-darkmidgray:#404955;--cue-color-darkgray:#121c2b;--cue-color-black:#0e1827;--cue-color-white:#ffffff;--cue-color-green:#e2f552;--cue-main-background:var(--cue-color-ultralightgray);--cue-main-foreground:var(--cue-color-darkgray);--cue-default:var(--cue-color-white);--cue-defaultContrast:var(--cue-color-darkgray);--cue-primary:var(--cue-color-blue);--cue-primaryContrast:var(--cue-color-white);--cue-accent:var(--cue-color-green);--cue-accentContrast:var(--cue-color-darkgray);--cue-secondary:var(--cue-color-darkblue);--cue-secondaryContrast:var(--cue-color-white);--cue-neutral:var(--cue-color-midgray);--cue-neutralContrast:var(--cue-color-darkgray);--cue-info:var(--cue-color-darkblue);--cue-infoContrast:var(--cue-color-white);--cue-error:#fc2626;--cue-errorContrast:var(--cue-color-white);--cue-success:#4caf50;--cue-successContrast:var(--cue-color-white);--cue-warning:#ffc107;--cue-warningContrast:var(--cue-color-white);--cue-border-color:var(--cue-color-lightgray);--cue-scrollbar-thumb-color:var(--cue-color-lightgray);--cue-scrollbar-track-color:transparent}:root{--cue-chart-text-color:var(--cue-color-darkgray);--cue-chart-text-color-select:var(--cue-color-black);--cue-chart-border-background-color:var(--cue-color-white);--chart-graph-edge-color:var(--cue-color-darkgray)}:root{--cue-dim-gap-xs:.25em ;--cue-dim-gap-s:.5em ;--cue-dim-gap-m:1em ;--cue-dim-gap-l:1.875em ;--cue-dim-gap-xl:2.5em ;--cue-dim-elem-xs:1.5em ;--cue-dim-elem-s:2em ;--cue-dim-elem-m:2.75em ;--cue-dim-elem-l:3.5em ;--cue-dim-s-gap-s:.375em ;--cue-dim-s-gap-m:.625em ;--cue-dim-s-gap-l:1em ;--cue-dim-s-elem-xs:1em ;--cue-dim-s-elem-s:1.25em ;--cue-dim-s-elem-m:1.75em ;--cue-dim-padding-main:.625em ;--cue-dim-padding-sub:.625em }@media(min-width:20em){:root{--cue-dim-padding-main:1.25em ;--cue-dim-padding-sub:.625em }}@media(min-width:40em){:root{--cue-dim-padding-main:2em ;--cue-dim-padding-sub:1em }}:root{--cue-card-border-radius:1.875em ;--cue-card-padding-x:1em ;--cue-card-padding-y:1em ;--cue-card-border-color:var(--cue-border-color);--cue-card-box-shadow:0 1px 1.5em rgba(0, 0, 0, .2)}@container cue-container (width < 20em){cue-card{--cue-card-border-radius:1.25em ;--cue-card-padding-x:.75em ;--cue-card-padding-y:.75em }}:root{--cue-button-gap:.5em ;--cue-button-xs-height:var(--cue-dim-elem-xs);--cue-button-xs-padding-x:.1875em ;--cue-button-xs-icon-width:1.125em ;--cue-button-s-height:var(--cue-dim-elem-s);--cue-button-s-padding-x:.375em ;--cue-button-s-icon-width:1.25em ;--cue-button-m-height:var(--cue-dim-elem-m);--cue-button-m-padding-x:.625em ;--cue-button-m-icon-width:1.5em ;--cue-button-l-height:var(--cue-dim-elem-l);--cue-button-l-padding-x:.75em ;--cue-button-l-icon-width:1.75em ;--cue-button-border-radius:var(--button-height);--cue-button-border-width:1px;--cue-button-border-style:solid;--cue-button-primary-background:var(--cue-color-blue);--cue-button-primary-foreground:var(--cue-color-white);--cue-button-primary-focus-color:var(--cue-color-blue);--cue-button-primary-border-color:var(--cue-color-blue);--cue-button-primary-disabled-foreground:var(--background-color, --cue-main-background);--cue-button-primary-disabled-foreground:var(--cue-color-lightgray);--cue-button-primary-disabled-background:var(--cue-color-ultralightgray);--cue-button-primary-disabled-border-color:var(--cue-color-ultralightgray);--cue-button-accent-background:var(--cue-accent);--cue-button-accent-foreground:var(--cue-accentContrast);--cue-button-accent-focus-color:var(--cue-accent);--cue-button-accent-border-color:var(--cue-accent);--cue-button-accent-disabled-foreground:var(--background-color, --cue-main-background);--cue-button-accent-disabled-foreground:var(--cue-color-lightgray);--cue-button-accent-disabled-background:var(--cue-color-ultralightgray);--cue-button-accent-disabled-border-color:var(--cue-color-ultralightgray);--cue-button-secondary-background:transparent;--cue-button-secondary-foreground:currentColor;--cue-button-secondary-focus-color:currentColor;--cue-button-secondary-border-color:currentColor;--cue-button-secondary-disabled-background:transparent;--cue-button-secondary-disabled-foreground:var(--cue-color-midgray);--cue-button-secondary-disabled-border-color:var(--cue-color-midgray);--cue-button-tertiary-background:transparent;--cue-button-tertiary-foreground:currentColor;--cue-button-tertiary-focus-color:currentColor;--cue-button-tertiary-border-color:transparent;--cue-button-tertiary-disabled-background:transparent;--cue-button-tertiary-disabled-foreground:var(--cue-color-midgray);--cue-button-tertiary-disabled-border-color:transparent;--cue-button-ghost-background:transparent;--cue-button-ghost-foreground:currentColor;--cue-button-ghost-focus-color:transparent;--cue-button-ghost-border-color:transparent;--cue-button-ghost-disabled-background:transparent;--cue-button-ghost-disabled-foreground:var(--cue-color-midgray);--cue-button-ghost-disabled-border-color:transparent;--cue-button-danger-background:transparent;--cue-button-danger-foreground:var(--cue-error);--cue-button-danger-focus-color:var(--cue-error);--cue-button-danger-border-color:transparent;--cue-button-danger-disabled-foreground:transparent;--cue-button-danger-disabled-background:var(--cue-color-midgray);--cue-button-danger-disabled-border-color:transparent;--cue-button-dim-background:transparent;--cue-button-dim-foreground:var(--cue-color-midgray);--cue-button-dim-focus-color:var(--cue-color-midgray);--cue-button-dim-border-color:var(--cue-color-lightgray);--cue-button-dim-disabled-background:transparent;--cue-button-dim-disabled-foreground:var(--cue-color-lightgray);--cue-button-dim-disabled-border-color:var(--cue-color-lightgray);--cue-button-xs-label-padding-x:.75em ;--cue-button-s-label-padding-x:1em ;--cue-button-m-label-padding-x:1.5em ;--cue-button-l-label-padding-x:3em }@media(prefers-color-scheme:dark){:root{--cue-button-primary-disabled-foreground:var(--cue-color-midgray);--cue-button-primary-disabled-border-color:var(--cue-color-midgray);--cue-button-primary-disabled-background:var(--cue-color-lightgray);--cue-button-secondary-disabled-foreground:var(--cue-color-darkmidgray);--cue-button-secondary-disabled-border-color:var(--cue-color-darkmidgray);--cue-button-tertiary-disabled-foreground:var(--cue-color-darkmidgray)}}:root{--cue-input-switch-background:var(--cue-color-midgray);--cue-input-switch-indicator-background:var(--cue-color-white);--cue-input-switch-indicator-foreground:var(--cue-color-black);--cue-input-switch-focus-color:var(--cue-color-white);--cue-input-switch-checked-background:var(--cue-color-darkblue);--cue-input-switch-checked-indicator-background:var(--cue-color-white);--cue-input-switch-checked-indicator-foreground:var(--cue-color-black);--cue-input-switch-disabled-background:var(--cue-color-midgray);--cue-input-switch-disabled-indicator-background:var(--cue-color-lightgray);--cue-input-switch-disabled-indicator-foreground:var(--cue-color-midgray)}:root{--cue-chip-delete-background-color:var(--cue-color-midgray);--cue-chip-delete-hover-background-color:var(--cue-color-darkmidgray);--cue-chip-delete-icon-color:var(--cue-color-ultralightgray)}:root{--cue-input-value-color:var(--cue-main-foreground);--cue-input-label-color:var(--cue-main-foreground);--cue-input-border-color:var(--cue-border-color);--cue-input-border-bottom-color:var(--cue-main-foreground);--cue-input-placeholder-color:var(--cue-color-darkmidgray);--cue-input-xs-padding:.75em .375em .25em .375em ;--cue-input-xs-font-size:.8125em ;--cue-input-xs-label-top:.75em ;--cue-input-xs-label-left:.375em ;--cue-input-xs-label-focused-top:.125em ;--cue-input-xs-label-focused-font-size:.625em ;--cue-input-s-padding:.875em .4375em .3125em .4375em ;--cue-input-s-font-size:.875em ;--cue-input-s-label-top:.875em ;--cue-input-s-label-left:.4375em ;--cue-input-s-label-focused-top:.1875em ;--cue-input-s-label-focused-font-size:.6875em ;--cue-input-m-padding:1em .5em .375em .5em ;--cue-input-m-font-size:1em ;--cue-input-m-label-top:1em ;--cue-input-m-label-left:.5em ;--cue-input-m-label-focused-top:.25em ;--cue-input-m-label-focused-font-size:.75em ;--cue-input-l-padding:1.125em .625em .5em .625em ;--cue-input-l-font-size:1.125em ;--cue-input-l-label-top:1.125em ;--cue-input-l-label-left:.625em ;--cue-input-l-label-focused-top:.3125em ;--cue-input-l-label-focused-font-size:.875em }:root{--cue-menu-border-radius:.9375em ;--cue-menu-padding-x:.5em ;--cue-menu-padding-y:.5em ;--cue-menu-gap:.5em ;--cue-menu-background-color:var(--cue-color-white);--cue-menu-foreground-color:var(--cue-color-black);--cue-menu-border-color:var(--cue-border-color);--cue-menu-box-shadow:0 1px 1.25em rgba(0, 0, 0, .1);--cue-menu-max-height:300px;--cue-menu-item-background-color:var(--cue-color-white);--cue-menu-item-selected-background-color:var(--cue-color-lightgray);--cue-menu-item-focus-background-color:var(--cue-color-ultralightgray);--cue-menu-item-height:var(--cue-dim-elem-m);--cue-menu-item-border-radius:.9375em ;--cue-menu-item-padding-x:1em ;--cue-menu-item-gap:1em ;--cue-menu-item-icon-size:1.25em ;--cue-menu-item-xs-min-width:3em;--cue-menu-item-s-min-width:6em;--cue-menu-item-m-min-width:12em}@container cue-container (width < 20em){:root{--cue-menu-item-xs-min-width:3em;--cue-menu-item-s-min-width:6em;--cue-menu-item-m-min-width:12em}}:root{--cue-grid-gap-s:var(--cue-dim-gap-s);--cue-grid-gap-m:var(--cue-dim-gap-m);--cue-grid-gap-l:var(--cue-dim-gap-l)}:root{--cue-flex-gap-xs:var(--cue-dim-gap-xs);--cue-flex-gap-s:var(--cue-dim-gap-s);--cue-flex-gap-m:var(--cue-dim-gap-m);--cue-flex-gap-l:var(--cue-dim-gap-l);--cue-flex-gap-xl:var(--cue-dim-gap-xl)}:root{--cue-table-row-border-bottom:1px solid;--cue-table-row-border-bottom-color:var(--cue-color-midgray);--cue-table-text-color:var(--cue-main-foreground);--cue-table-secondary-text-color:var(--cue-color-midgray);--cue-table-highlight-color:var(--cue-color-ultralightgray);--cue-table-highlight-text-color:var(--cue-color-darkgray);--cue-table-selected-color:var(--cue-color-green);--cue-table-selected-text-color:var(--cue-color-darkgray);--cue-table-border-color:var(--cue-border-color);--cue-table-row-hover-bg:var(--cue-color-ultralightgray);--cue-table-xs-height:200px;--cue-table-s-height:300px;--cue-table-m-height:400px;--cue-table-l-height:500px;--cue-table-xl-height:600px;--cue-table-font-xs-size:var(--cue-font-xs-size);--cue-table-font-s-size:var(--cue-font-s-size);--cue-table-font-m-size:var(--cue-font-m-size);--cue-table-font-l-size:var(--cue-font-l-size);--cue-table-data-font-xs-size:var(--cue-font-xs-size);--cue-table-data-font-s-size:var(--cue-font-s-size);--cue-table-data-font-m-size:var(--cue-font-m-size);--cue-table-data-font-l-size:var(--cue-font-l-size);--cue-table-data-font-xl-size:var(--cue-font-xl-size)}:root{--cue-paginator-text-color:var(--cue-main-foreground)}:root{--cue-modal-overlay-color:rgba(245, 246, 249, .7)}:root{--cue-icon-width:var(--cue-dim-elem-xs)}:root{--cue-stepper-border-color:var(--cue-main-foreground);--cue-stepper-fill-color:var(--cue-main-foreground);--cue-stepper-connector-color:var(--cue-main-foreground)}:root{color-scheme:light}html{padding:0;margin:0;height:100%;width:100%}body{display:flex;flex-direction:column;background-color:var(--cue-main-background);color:var(--cue-main-foreground)}body>*{scrollbar-color:var(--cue-scrollbar-thumb-color) var(--cue-scrollbar-track-color);scrollbar-width:thin;scroll-behavior:smooth}</style><link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.css"></noscript></head>
+    <body>
+        <div class="stack">
+            <cue-card style="height: 120px">Default card content</cue-card>
+            <cue-card style="height: 120px" variant="primary">Primary card content</cue-card>
+            <cue-card style="height: 120px" variant="accent" shadow="true">Accent card with shadow</cue-card>
+        </div>
+    <script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="main.js" type="module"></script></body>
+</html>