scratch.md

layout	Blank

<script setup> import { ref, computed } from 'vue'; import ExampleTabs from '@exampleComponents/ExampleTabs.vue'; import { DtTabGroup, DtTab, DtTabPanel } from '@dialpad/dialtone-vue'; import { useThemeManager } from '@composables/useThemeManager'; const { currentMode, currentContrast, currentModeIconName, setMode, setContrast, } = useThemeManager(); const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1); const borderless = ref(false); const outlined = ref(false); const muted = ref(false); const showIcon = ref(false); const showTabEndIcon = ref(false); const showLeading = ref(false); const showTrailing = ref(false); const size = ref('md'); const selectOnFocus = ref(false); const isDisabled = ref(false); const labelSizeSelection = ref('default'); const resolvedLabelSize = computed(() => labelSizeSelection.value === 'default' ? undefined : labelSizeSelection.value); const labelStrengthSelection = ref('default'); const resolvedLabelStrength = computed(() => labelStrengthSelection.value === 'default' ? undefined : labelStrengthSelection.value); const showLabelClass = ref(false); const resolvedLabelClass = computed(() => showLabelClass.value ? 'd-bgc-warning' : undefined); const checkRadioLabelSize = ref('default'); const resolvedCheckRadioLabelSize = computed(() => checkRadioLabelSize.value === 'default' ? undefined : checkRadioLabelSize.value); const checkRadioLabelStrength = ref('default'); const resolvedCheckRadioLabelStrength = computed(() => checkRadioLabelStrength.value === 'default' ? undefined : checkRadioLabelStrength.value); const showBtnLeading = ref(false); const showBtnTrailing = ref(false); const showBtnStartIcon = ref(false); const showBtnEndIcon = ref(false); const removeBtnSlotClass = ref(false); const highlightBtnSlotClass = ref(false); const showBtnLabelClass = ref(false); const resolvedBtnLabelClass = computed(() => showBtnLabelClass.value ? 'd-bgc-warning' : undefined); const showTabLabelClass = ref(false); const resolvedTabLabelClass = computed(() => showTabLabelClass.value ? 'd-bgc-warning' : undefined); const showInputDescription = ref(false); const showInputMessages = ref(false); const inputMessages = computed(() => showInputMessages.value ? [{ message: 'Error validation message', type: 'error' }] : []); const showInputMessagesClass = ref(false); const resolvedInputMessagesClass = computed(() => showInputMessagesClass.value ? 'd-bgc-critical' : undefined); const showInputDescriptionClass = ref(false); const resolvedInputDescriptionClass = computed(() => showInputDescriptionClass.value ? 'd-bgc-success' : undefined); const showDescription = ref(false); const showCheckRadioMessages = ref(false); const checkRadioMessages = computed(() => showCheckRadioMessages.value ? [{ message: 'Error validation message', type: 'error' }] : []); const showCheckRadioMessagesClass = ref(false); const resolvedCheckRadioMessagesClass = computed(() => showCheckRadioMessagesClass.value ? 'd-bgc-critical' : undefined); const showCheckRadioDescriptionClass = ref(false); const resolvedCheckRadioDescriptionClass = computed(() => showCheckRadioDescriptionClass.value ? 'd-bgc-success' : undefined); const checkRadioDisabled = ref(false); </script> Scratchpad System Light Dark Default High Disabled Button Not just a matter of applying opacity to whole button, but w/ combination of `color-mix()` and tweaking existing DtButton css variables via `oklch()` of specific properties – separate opacity and saturation for border, bgc, fc, etc. Disabled Place Call Place Call Place Call Place Call Place Call Place Call Place Call Place Call Place Call Place Call Place Call Button: Leading/Trailing Freeform elements that are rendered before/after the button content. Leading Trailing Start Icon End Icon `labelClass` Remove leading/trailing class Highlight leading/trailing Place Call Place Call Place Call Place Call Place Call Sizing update: Button/Input/Select Button Button Button Button Button Input / Select `labelClass` Description Messages `messagesClass` `descriptionClass` Tabs Just straight up refactor to use DtButton instead of custom markup/style. Use mix of DtButton variants depending on `active`. Uses all DtButton sizes (currently at least). Borderless Outlined Muted Start Icon End Icon Leading Trailing Select on focus `labelClass` Backwards-compatible old tabs html

First tab

Second tab

Third tab

Argentina United States United Kingdom India Canada

The Argentina stretches from subtropical forests in the north to glacial landscapes in the south, encompassing the towering Andes mountains and the vast Pampas grasslands in between. Its cities blend European architectural influences with a vibrant local character, while rural traditions of horsemanship and cattle ranching continue to shape the national identity. The country is celebrated for its contributions to tango, wine production, and a culinary culture built around shared meals and regional flavors. The United States spans a broad continental range, from Atlantic coastlines and Appalachian ridges to Great Plains, Rocky Mountain summits, and Pacific shores beyond. Major metropolitan areas serve as centers for finance, technology, and the arts, while smaller communities maintain distinct regional customs, dialects, and culinary traditions. The nation's history of immigration has produced a diverse cultural fabric, with influences from virtually every corner of the globe woven into daily life. The United Kingdom comprises England, Scotland, Wales, and Northern Ireland, each with distinct landscapes ranging from chalk cliffs and moors to highland lochs and green valleys. Its cities layer centuries of history alongside modern architecture, with institutions in education, finance, and governance that have influenced systems around the world. A strong tradition in literature, theater, and music continues to thrive, supported by public institutions and a widespread culture of creative expression. The India extends from the Himalayan ranges in the north through fertile river plains to tropical coastlines in the south, supporting an extraordinary range of ecosystems and climates. Hundreds of languages and traditions coexist across its states and territories, producing one of the most culturally varied societies on earth with deep historical roots. A growing technology sector and expanding urban centers complement longstanding agricultural and artisan economies that continue to sustain millions of people. The Canada stretches from the Atlantic to the Pacific and northward into the Arctic, encompassing boreal forests, prairies, mountain ranges, and thousands of lakes and waterways. Its cities are known for cultural diversity and livability, while vast rural and wilderness areas support forestry, mining, and agriculture across multiple climate zones. Official bilingualism in English and French reflects a history shaped by Indigenous peoples, European settlement, and ongoing immigration from around the world.

Argentina United States United Kingdom England, Scotland, Wales, Northern Ireland India Canada

The Argentina stretches from subtropical forests in the north to glacial landscapes in the south, encompassing the towering Andes mountains and the vast Pampas grasslands in between. Its cities blend European architectural influences with a vibrant local character, while rural traditions of horsemanship and cattle ranching continue to shape the national identity. The country is celebrated for its contributions to tango, wine production, and a culinary culture built around shared meals and regional flavors. The United States spans a broad continental range, from Atlantic coastlines and Appalachian ridges to Great Plains, Rocky Mountain summits, and Pacific shores beyond. Major metropolitan areas serve as centers for finance, technology, and the arts, while smaller communities maintain distinct regional customs, dialects, and culinary traditions. The nation's history of immigration has produced a diverse cultural fabric, with influences from virtually every corner of the globe woven into daily life. The United Kingdom comprises England, Scotland, Wales, and Northern Ireland, each with distinct landscapes ranging from chalk cliffs and moors to highland lochs and green valleys. Its cities layer centuries of history alongside modern architecture, with institutions in education, finance, and governance that have influenced systems around the world. A strong tradition in literature, theater, and music continues to thrive, supported by public institutions and a widespread culture of creative expression. The India extends from the Himalayan ranges in the north through fertile river plains to tropical coastlines in the south, supporting an extraordinary range of ecosystems and climates. Hundreds of languages and traditions coexist across its states and territories, producing one of the most culturally varied societies on earth with deep historical roots. A growing technology sector and expanding urban centers complement longstanding agricultural and artisan economies that continue to sustain millions of people. A growing technology sector and expanding urban centers complement longstanding agricultural and artisan economies that continue to sustain millions of people. A growing technology sector and expanding urban centers complement longstanding agricultural and artisan economies that continue to sustain millions of people. Canada stretches from the Atlantic to the Pacific and northward into the Arctic, encompassing boreal forests, prairies, mountain ranges, and thousands of lakes and waterways. Its cities are known for cultural diversity and livability, while vast rural and wilderness areas support forestry, mining, and agriculture across multiple climate zones. Official bilingualism in English and French reflects a history shaped by Indigenous peoples, European settlement, and ongoing immigration from around the world.

Notice / Banner / Toast Updated typography sizing and intelligent icon alignment. Icon margin adjusts based on content layout: title-only, message-only, or title+message. Notice

Default Action completed successfully. Please review before proceeding. Something went wrong. Please try again. A neutral notice for general information. Important Visually prominent variant with filled background. Visually prominent variant with filled background. Visually prominent variant with filled background. Visually prominent variant with filled background. Alignment per internal parts Message only — icon aligns to center when there is a single line of content. When both title and message are present, the icon aligns to the top of the content stack.

Banner Banners are more prominent than notices. Action completed successfully. Please review before proceeding. Something went wrong. Important Banners are more prominent than notices. Action completed successfully. Please review before proceeding. Something went wrong. Toast

Default Important Alignment per internal parts

Radio / Checkbox Description Disabled `labelClass` Messages `messagesClass` `descriptionClass` Checkbox Radio Traveling Indicator Stress Test 1. All four variants Default (::after underline) Outlined Muted + Outlined Muted Active (background) 2. All sizes (width variance stress) Size 100 (xs) Size 200 (sm) Size 300 (md) — default Size 400 (lg) Size 500 (xl) 3. Spread modes (indicator width morphing) spread="none" (default) spread="grow" spread="equal" 4. Vertical orientation Default vertical Outlined vertical Muted vertical 5. Borderless Borderless default Borderless outlined 6. Auto activation mode (arrow keys should NOT animate) Auto mode — click should animate, arrows should snap Auto mode + outlined 7. Disabled (should do nothing) Whole group disabled 8. showIndicatorTransition=false (animation suppressed) Should switch instantly, no slide First Second Third Panel 1 Panel 2 Panel 3 9. Multiple instances on same page (no conflicts) Click tabs in one group while another is mid-animation. They should not interfere. Group A Group B Group C 10. Extreme tab width differences (scale morphing stress) Short vs very long labels — watch the scale animation Medium label Extremely long tab label for stressy stressful testing Shrt Panel A Panel Long Panel B Medium label Extremely long tab label for stressy stressful testing Shrt Panel A Panel Long Panel B 11. Many tabs (potential wrapping) Does the animation break when tabs wrap to a second row? Alpha Bravo Charlie Delta Echo Foxtrot Golf Hotel India Juliet Panel Alpha Panel Bravo Panel Charlie Panel Delta Panel Echo Panel Foxtrot Panel Golf Panel Hotel Panel India Panel Juliet 12. RTL direction Does the indicator slide the correct direction in RTL?

13. Inverted 14. Rapid click test Click tabs as fast as possible — animation should cancel cleanly, no stuck states 15. Combined extremes Outlined + spread=equal + size 500 Muted + vertical + borderless Muted + outlined + spread=grow + size 100