q2-design-system 1.67.0 → 1.67.1

package/dist/index.js

@@ -71,7 +71,7 @@ function __variableDynamicImportRuntime1__(path) {
     })
    }
  }
-const TECTONSDKVERSION = '1.67.0';
+const TECTONSDKVERSION = '1.67.1';
 const defaultOptions = {
     loadTheme: true,
     loadUtilities: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "q2-design-system",
-  "version": "1.67.0",
+  "version": "1.67.1",
   "description": "Package that allows projects to only use the elements portion of the Tecton system.",
   "license": "MIT",
   "author": "Q2 Tecton Team",
@@ -14,11 +14,23 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "pnpm run clean && rollup --config rollup.config.js --bundleConfigAsCjs",
+    "build:dev": "pnpm run build",
+    "build:local": "pnpm run clean && rollup --config rollup.config.js -w --bundleConfigAsCjs",
+    "build:prerelease": "pnpm run build",
+    "build:prod": "pnpm run build",
+    "clean": "rm -rf ./dist",
+    "nom": "rm -rf node_modules",
+    "test": "jest",
+    "test:ci": "jest",
+    "test:coverage": "jest --coverage"
+  },
   "dependencies": {
     "intl-messageformat": "10.7.18",
-    "q2-tecton-common": "1.67.0",
-    "q2-tecton-theme": "1.67.0",
-    "q2-tecton-elements": "1.67.0"
+    "q2-tecton-common": "1.67.1",
+    "q2-tecton-elements": "1.67.1",
+    "q2-tecton-theme": "1.67.1"
   },
   "devDependencies": {
     "@rollup/plugin-dynamic-import-vars": "^2.1.5",
@@ -35,16 +47,6 @@
     "rollup-plugin-serve": "^2.0.3",
     "ts-jest": "^29.2.3"
   },
-  "scripts": {
-    "build": "pnpm run clean && rollup --config rollup.config.js --bundleConfigAsCjs",
-    "build:dev": "pnpm run build",
-    "build:local": "pnpm run clean && rollup --config rollup.config.js -w --bundleConfigAsCjs",
-    "build:prerelease": "pnpm run build",
-    "build:prod": "pnpm run build",
-    "clean": "rm -rf ./dist",
-    "nom": "rm -rf node_modules",
-    "test": "jest",
-    "test:ci": "jest",
-    "test:coverage": "jest --coverage"
-  }
-}
+  "packageManager": "pnpm@10.27.0",
+  "gitHead": "b6fd1c010a85ddc29aec84305d9546f823197a70"
+}

package/guidelines/Guidelines.md

@@ -1,208 +0,0 @@
-> This content is specific to Tecton libraries on version 1.67.0.
-
-## Before You Start
-
-If you're unsure what framework the developer is using, ask them:
-- **React** → Use React wrappers from [react-wrappers.md](framework-wrappers/react-wrappers.md)
-- **Vue** → Use Vue wrappers from [vue-wrappers.md](framework-wrappers/vue-wrappers.md)
-- **Plain HTML/Jinja/other** → Use web components directly (examples below)
-
-You can also check the project's `package.json` for `react`, `vue`, or similar dependencies.
-
----
-
-The Tecton Design System provides web components for building consistent user-experiences that work across various frameworks and platforms and remain in sync with branding and theming.
-
-## About Web Components
-
-Today, if you're doing web development, there are countless options you may be utilizing to present content to your users. Some of these options include server-side rendering using languages like Ruby, Python, or Javascript. Other options include client-side rendering with frameworks like React, Vue, Ember, or Angular.
-
-Because of this, we chose to build out our design system with [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components). Using a symphony of browser features, we can create custom HTML elements complete with their own attributes, styling, and features.
-
-Each of the components that Tecton publishes goes through an extensive design review, is well-tested, and is built with accessibility in mind. Additionally, when bugs or necessary improvements are identified, we address them in our codebase, and then all the teams using the design system only need to take an update to utilize them.
-
-
-## Using Web Components
-
-Because web components get registered with the browser as HTML elements, using them is pretty straightforward. For example, if you want to display a `q2-btn` element with a `q2-icon` on the left side, it's as simple as this:
-
-```html
-<q2-btn intent="workflow-primary">
-  <q2-icon type="edit"></q2-icon>
-  <span>Edit</span>
-</q2-btn>
-```
-
-Below, you will find descriptions of the various ways you can use each of these features within web components. Every element's documentation page documents what is available.
-
-
-## Properties
-
-Each component in the design system allows you to customize its use in various ways by exposing attributes and properties that modify how it looks or behaves. While attributes and properties are two ways of achieving the same result, their distinction is worth documenting here.
-
-**Attributes** are how you set the state of an element via HTML. On the other hand, you use **properties** to set the state of an element via JavaScript. The difference can be easily seen here:
-
-```html
-<!-- Setting with an attribute -->
-<q2-btn intent="workflow-primary"></q2-btn>
-
-<!-- Setting with a property -->
-<script>
-  const button = document.querySelector("q2-btn");
-  button.intent = "workflow-primary";
-</script>
-```
-
-Some properties are defined as `boolean`, meaning they can only have a value of `true` or `false`. These can be utilized in the following ways:
-
-```html
-<!-- ATTRIBUTE -->
-<q2-btn hide-label></q2-btn>
-<!-- OR -->
-<q2-btn hide-label="true"></q2-btn>
-
-<!-- PROPERTY -->
-<script>
-  const button = document.querySelector("q2-btn");
-  button.hideLabel = true;
-</script>
-```
-
-In rare cases, properties can be objects or arrays. An example is when data is passed to a chart or table. While these cannot be set via attributes, they can easily be set using JavaScript.
-
-```javascript
-const chart = document.querySelector("q2-chart-bar");
-chart.data = [
-    {
-        value: 1048,
-        name: 'March',
-        id: 'march',
-    },
-    {
-        value: 580,
-        name: 'April',
-        id: 'april',
-    },
-    {
-        value: 735,
-        name: 'May',
-        id: 'may',
-    },
-    {
-        value: 465,
-        name: 'June',
-        id: 'june',
-    },
-    {
-        value: 927,
-        name: 'July',
-        id: 'july',
-    },
-]
-```
-
-Please visit each component's documentation page for a full list of exposed properties.
-
-
-## Events
-
-Within the Tecton components, you can use events to listen for when the user performs an action, such as typing a value into an input field or clicking a button. To listen for events, you can use the `addEventListener` method on the element.
-
-```html
-<!-- In JavaScript with addEventListener -->
-<q2-input label="Name"></q2-input>
-
-<script>
-  const input = document.querySelector("input");
-  input.addEventListener("tctInput", (event) => {
-    console.log("VALUE", event.detail.value);
-  })
-</script>
-```
-
-Please see the documentation on each component to learn what events are available and what data they provide. If you are using our provided framework wrappers, please see the documentation for working with events in React Wrappers and Vue Wrappers.
-
-
-## Methods
-
-Many components have methods that you can call to perform various actions that may not make sense to do by updating an attribute or property. They can be invoked the same way you might call other methods on an element like `element.click()` or `element.focus()`. For example:
-
-```javascript
-const chart = document.querySelector("q2-chart-donut");
-await chart.clearSelection();
-```
-
-All methods defined by Tecton are asynchronous by default, so you may need to take that into consideration when using them. Please see the documentation on each component to learn what methods are available and the arguments you may pass to them.
-
-
-## Common Patterns
-
-Here are some frequently used component patterns to help you get started quickly.
-
-### Form with Validation
-```html
-<q2-form>
-  <q2-input label="Email" id="email" type="email"></q2-input>
-  <q2-input label="Password" id="password" type="password"></q2-input>
-  <q2-btn intent="workflow-primary" type="submit">Sign In</q2-btn>
-</q2-form>
-
-<script>
-  document.querySelector("q2-form").addEventListener("submit", (e) => {
-    const emailInput = document.getElementById("email");
-    const passwordInput = document.getElementById("password");
-
-    if (!emailInput.value) {
-      emailInput.errors = ["Email is required"];
-      e.preventDefault();
-    }
-    if (!passwordInput.value) {
-      passwordInput.errors = ["Password is required"];
-      e.preventDefault();
-    }
-  });
-</script>
-```
-
-### Button Pairing
-```html
-<q2-action-group>
-  <q2-btn intent="workflow-secondary">Cancel</q2-btn>
-  <q2-btn intent="workflow-primary">Submit</q2-btn>
-</q2-action-group>
-```
-
-### Collapsible Section
-```html
-<q2-section label="Account Details" collapsible expanded>
-  <q2-detail label="Account Number" value="****1234"></q2-detail>
-  <q2-detail label="Account Type" value="Checking"></q2-detail>
-</q2-section>
-```
-
-### Icon Button
-```html
-<q2-btn intent="workflow-primary" label="Edit" hide-label>
-  <q2-icon type="edit"></q2-icon>
-</q2-btn>
-```
-
-
-## Testing
-
-Tecton components are extensively tested with End-to-End (E2E), Unit, and Accessibility tests. This means you don't need to verify core component functionality—we handle that. Your tests should focus on your application logic and how components integrate with your features.
-
-Key test types to consider for your features:
-- **E2E Testing** - Test complete user flows from the user's perspective
-- **Integration Testing** - Verify your components work together correctly
-- **Accessibility Testing** - Ensure your feature meets accessibility criteria (tools like [aXe DevTools](https://www.deque.com/axe/devtools/) help here)
-
-Use [Test Methods](/guides/test-methods) to interact with components in tests without reaching into ShadowDOM.
-
-## Resources
-
-<!-- RESOURCES_START -->
-- [Components](components/overview.md) — Full catalog of Tecton web components with props, slots, events, and usage examples. Read overview.md to find the right component for any UI need: buttons, inputs, selects, forms, cards, data tables, charts, modals, tooltips, carousels, steppers, tabs, lists, grids, and more. Use these instead of native HTML elements.
-- [Theming](theming/overview.md) — How Tecton styles components using layered CSS variables and the complete set of available theme tokens. Read overview.md for the styling guide (variable prefixes, override strategies, platform vs. extension scoping) and the full CSS variable reference — use these tokens instead of writing custom hex values or hardcoded styles.
-- [Framework Wrappers](framework-wrappers/overview.md) — Integration guides for using Tecton web components in React and Vue projects. Read overview.md for setup instructions, import patterns, event binding, and idiomatic usage examples for each framework — always use these wrappers instead of raw web component tags in React or Vue codebases.
-<!-- RESOURCES_END -->

package/guidelines/components/overview.md

@@ -1,59 +0,0 @@
-# Components
-
-- [Action Group](q2-action-group.md) — (Display) Use for laying out groups of buttons or links with consistent spacing.
-- [Avatar](q2-avatar.md) — (Display) Use for displaying photos, initials, or icons for people, businesses, or accounts.
-- [Badge](q2-badge.md) — (Display) Use for displaying counts, statuses, or indicators on other elements.
-- [Button](q2-btn.md) — (Forms) Use for triggering actions including submit, save, cancel, or delete.
-- [Calendar](q2-calendar.md) — (Forms) Use for selecting a date from a calendar popover.
-- [Card Image](q2-card-image.md) — Displays a visual representation of a credit or debit card with customizable styling
-- [Card](q2-card.md) — (Display) Use for grouping related content in a contained, elevated surface.
-- [Carousel Pane](q2-carousel-pane.md) — (Display) Use as a single slide within a Carousel.
-- [Carousel](q2-carousel.md) — (Display) Use for cycling through a series of content slides with swipe or button navigation.
-- [Area Chart](q2-chart-area.md) — (Data Visualization) Use for showing trends over time with filled areas under lines.
-- [Bar Chart](q2-chart-bar.md) — (Data Visualization) Use for comparing values across categories with horizontal or vertical bars.
-- [Donut Chart](q2-chart-donut.md) — (Data Visualization) Use for showing proportions of a whole as segments in a ring.
-- [Checkbox Group](q2-checkbox-group.md) — (Forms) Use for selecting multiple options from a set of checkboxes.
-- [Checkbox](q2-checkbox.md) — (Forms) Use as a single binary choice; nest within a Checkbox Group for grouped selection.
-- [Context](q2-context.md) — (Display) Use for displaying supplementary information or hints alongside content.
-- [Currency](q2-currency.md) — (Text) Use for displaying formatted monetary amounts with proper locale.
-- [Data Table](q2-data-table.md) — (Display) Use for displaying large datasets with sorting, filtering, and selecting.
-- [Detail](q2-detail.md) — (Display) Use for displaying label-value pairs like account details or miscellaneous info.
-- [Dropdown](q2-dropdown.md) — (Display) Use for menus of contextual actions triggered by a button click.
-- [Editable Field](q2-editable-field.md) — (Forms) Use for inline editing of data that is normally displayed as read-only.
-- [File Picker](q2-file-picker.md) — (Forms) Use for uploading files via browse dialog or drag-and-drop.
-- [Form](q2-form.md) — (Forms) Use for wrapping form fields with consistent spacing.
-- [Formatted Text](q2-formatted-text.md) — (Text) Use for displaying text with formatting like phone numbers, SSN, or dates.
-- [Grid Area](q2-grid-area.md) — (Display) Use as a positioned cell within a Grid layout.
-- [Grid](q2-grid.md) — (Display) Use for responsive grid layouts with flexible rows and columns.
-- [Icon](q2-icon.md) — (Display) Use for displaying icons that represent actions, states, or concepts.
-- [Input](q2-input.md) — (Forms) Use for single-line text entry including email, phone, currency, SSN, and password.
-- [Item](q2-item.md) — (Display) Use for laying out structured content with header, body, and footer text, icons, and actions.
-- [Legend](q2-legend.md) — (Data Visualization) Use for displaying chart legends with interactive item selection.
-- [Link](q2-link.md) — (Display) Use for navigation to other pages or sections. Prefer over q2-btn for non-action navigation.
-- [List](q2-list.md) — (Display) Use for grouping Item components into a vertical list.
-- [Loading](q2-loading.md) — (Feedback) Use to indicate async operations or content loading in progress.
-- [Localization](q2-loc.md) — (Text) Use for displaying localized text from translation keys.
-- [Message](q2-message.md) — (Feedback) Use for contextual non-blocking notifications like success, error, or info alerts.
-- [Meter](q2-meter.md) — (Data Visualization) Use for showing progress or a value within a known range.
-- [Mutation Observer](q2-mutation-observer.md) — (Utility) Use for observing DOM changes to child elements and emitting events.
-- [Option Group](q2-optgroup.md) — (Forms) Use for grouping related options under a label in Select or Dropdown.
-- [Option List](q2-option-list.md) — (Forms) Use internally by Select and Dropdown for rendering searchable option lists.
-- [Option](q2-option.md) — (Forms) Use as a selectable item within Select, Dropdown, Tag, or Pill components.
-- [Pagination](q2-pagination.md) — (Display) Use for navigating between pages of content like search results or tables.
-- [Pill](q2-pill.md) — (Display) Use for displaying and removing active filters in data views.
-- [Radio Group](q2-radio-group.md) — (Forms) Use for selecting exactly one option from a small set of choices.
-- [Radio](q2-radio.md) — (Forms) Use as a single option within a Radio Group.
-- [Relative Time](q2-relative-time.md) — (Text) Use for displaying time differences like "2 hours ago" or "in 3 days".
-- [Resize Observer](q2-resize-observer.md) — (Utility) Use for detecting size changes to elements and emitting resize events.
-- [Section Container](q2-section-container.md) — (Display) Use for managing multiple collapsible sections with single or multiple open modes.
-- [Section](q2-section.md) — (Display) Use for grouping related content with a header and optional collapse.
-- [Select](q2-select.md) — (Forms) Use for choosing from a list of options with single-select, multi-select, or search.
-- [Stepper Pane](q2-stepper-pane.md) — (Display) Use as a single step within a Stepper or Vertical Stepper.
-- [Vertical Stepper](q2-stepper-vertical.md) — (Display) Use for guiding users through a multi-step workflow with vertical progress.
-- [Stepper](q2-stepper.md) — (Display) Use for guiding users through a multi-step workflow with horizontal progress.
-- [Tab Container](q2-tab-container.md) — (Display) Use for switching between multiple views within the same context.
-- [Tab Pane](q2-tab-pane.md) — (Display) Use as a single tab within a Tab Container.
-- [Tag](q2-tag.md) — (Display) Use for displaying metadata labels or categories on content.
-- [Textarea](q2-textarea.md) — (Forms) Use for multi-line text input like messages, comments, or lengthy descriptions.
-- [q2-toast](q2-toast.md)
-- [Tooltip](q2-tooltip.md) — (Feedback) Use for brief hints or explanations shown on hover or focus.

package/guidelines/components/q2-action-group.md

@@ -1,118 +0,0 @@
----
-title: Action Group
-description: (Display) Use for laying out groups of buttons or links with consistent spacing.
----
-# Action Group
-
-Use for laying out groups of buttons or links with consistent spacing.
-
-## Props
-
-### fullWidth
-
-Whether the slotted elements should take up the full width of the container when in horizontal orientation.
-
-**Type:**
-```typescript
-boolean
-```
-
-**Default Value:** `undefined`
-
-> [!WARNING]
-> This will prevent the buttons from wrapping when the container is too small to fit all buttons.
-
-
-### orientation
-
-The orientation of the buttons, which will override the auto orientation.
-
-**Type:**
-```typescript
-"auto" | "horizontal" | "vertical"
-```
-
-**Default Value:** `'auto'`
-
-> [!NOTE]
-> This will override and disable the auto determination of the orientation.
-
-> [!WARNING]
-> Vertical orientation is not supported for [Links](https://tecton.q2developer.com/design-system/q2-link/)
-or `"coin"` [Buttons](https://tecton.q2developer.com/design-system/q2-btn/), and will be set to "horizontal".
-
-
-### orientationThreshold
-
-The width, in pixels, that determines whether to display the buttons in vertical or horizontal orientation
-
-**Type:**
-```typescript
-number
-```
-
-**Default Value:** `440`
-
-> [!NOTE]
-> The component determines this based on the width of the element itself, not the browser window.
-
-
-## Design
-
-### Overview
-
-An Action Group is a collection of actions combined to give access to frequently performed, related actions. Actions inside the Action Group follow their parent components' guidelines and states.
-
-#### Anatomy
-
-```html
-<q2-action-group>
-  <q2-btn intent="workflow-primary">Submit</q2-btn>
-  <q2-btn intent="workflow-secondary">Cancel</q2-btn>
-  <q2-btn intent="workflow-escape">Reset</q2-btn>
-</q2-action-group>
-```
-
-To insure proper display in the user interface, action groups using buttons should never wrap to two lines or rows. If there is a situation where the action group wraps inside its object, use stacked blocked display to present the buttons.
-
-#### Usage
-
-#### When To Use
-
-- **Actions have a contextual relationship**
-   - For example, the default button group can be used when a form has a primary and alternative action.
-- **Stepping through linear content**
-   - Actions in an action group can be used for directional navigation and actions ("Back", "Next", "Continue", "Skip", "Cancel")
-
-#### When To Not Use
-
-- **If actions are not related**
-   - Consider how placement and alternative structure of unrelated actions can improve usability over placing all actions in a group.
-- **Linking to content**
-   - Buttons in button groups should not be used when text links would be simpler and more contextually appropriate. Grouped buttons such as "Next" and "Previous" are acceptable when content is organized sequentially.
-
-#### Usability Guidance
-
-- **Avoid burden of choice.**
-
-   - Try not to present the user with too many options (4 actions maximum)
-- **Don't mix differently sized buttons in the same group**
-- **Use only one primary button in a button group**
-- **Attempt to maintain consistency with other pages when placing the primary action.**
-- **Use short, descriptive button labels to describe controls.**
-   - Button labels should be concise and clear enough to indicate what will happen when the button is interacted with
-
-
-
-
-
-## Dependencies
-
-### Uses
-
-- `q2-resize-observer`
-
-### Used By
-
-- `q2-context`
-- `q2-modal`

package/guidelines/components/q2-avatar.md

@@ -1,85 +0,0 @@
----
-title: Avatar
-description: (Display) Use for displaying photos, initials, or icons for people, businesses, or accounts.
----
-# Avatar
-
-Use for displaying photos, initials, or icons for people, businesses, or accounts.
-
-## Props
-
-### icon
-
-A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback.
-
-**Type:**
-```typescript
-string
-```
-
-**Default Value:** `'person'`
-
-### initials
-
-A set of up to four initials to display as capitalized text. Takes priority over `name`.
-
-**Type:**
-```typescript
-string
-```
-
-**Default Value:** `undefined`
-
-### name
-
-The name associated with the avatar.
-The initials of the first and last words provided will display as capital letters.
-
-**Type:**
-```typescript
-string
-```
-
-**Default Value:** `undefined`
-
-> [!NOTE]
-> We recommend always providing a name when you want the avatar to be presented to screen readers.
-
-
-### size
-
-Determines how large to make the avatar
-
-**Type:**
-```typescript
-"large" | "medium" | "small"
-```
-
-**Default Value:** `'medium'`
-
-### src
-
-Displays the image provided by the user.
-
-**Type:**
-```typescript
-string
-```
-
-**Default Value:** `undefined`
-
-## Slots
-
-| Name | Description |
-|------|-------------|
-| `decorator` | An optional affordance indicator to display in the top-right corner |
-
-## Dependencies
-
-### Uses
-
-- `q2-icon`
-
-### Used By
-
-- `q2-card`

package/guidelines/components/q2-badge.md

@@ -1,102 +0,0 @@
----
-title: Badge
-description: (Display) Use for displaying counts, statuses, or indicators on other elements.
----
-# Badge
-
-Use for displaying counts, statuses, or indicators on other elements.
-
-## Props
-
-### maxLength
-
-The number of characters to show. A maximum limit of 18 characters is acceptable.
-
-**Type:**
-```typescript
-number
-```
-
-**Default Value:** `undefined`
-
-### size
-
-The size of the badge.
-
-**Type:**
-```typescript
-"default" | "large"
-```
-
-**Default Value:** `undefined`
-
-### status
-
-The stoplight color of the element when `theme` is not present.
-
-**Type:**
-```typescript
-"alert" | "info" | "success" | "warning"
-```
-
-**Default Value:** `undefined`
-
-### theme
-
-The color of the badge when in the active state.
-The `theme` has higher priority than `status`.
-
-**Type:**
-```typescript
-"primary" | "secondary" | "tertiary"
-```
-
-**Default Value:** `undefined`
-
-### value
-
-> [!NOTE]
-> This prop is localizable.
-
-What to display in the badge. Negative numbers will be shown as positive.
-
-**Type:**
-```typescript
-number | string
-```
-
-**Default Value:** `undefined`
-
-> [!NOTE]
-> `q2-badge` also has limited support for slotted HTML elements.
-
-
-## Methods
-
-### getTextContent
-
-```typescript
-getTextContent() => Promise<string>
-```
-
-Returns the text content of the badge. This accounts for the text in slotted elements or the Shadow DOM.
-
-**Returns:** `Promise<string>`
-
-## Accessibility
-
-### Decorator Text
-
-When using the q2-badge in its "empty" state as a decorator in other elements, it is the implementer's responsibility to ensure proper screen reader text is made available for assistive technologies.
-
-When the q2-badge has a value, the element will be visible to assistive technologies and will be read aloud.
-
-
-
-## Dependencies
-
-### Used By
-
-- `q2-data-table`
-- `q2-input`
-- `q2-tab-container`