Συστατικά

@pantoken/components παρέχει στυλ συστατικών με βάση κλάσεις κατασκευασμένα από τα tokens του Instructure. Εισάγετε το stylesheet και επισημάνετε το markup — δεν απαιτείται πλαίσιο εργασίας.

import "@pantoken/components/components.css";

NOTE

Προτιμάτε προσαρμοσμένα στοιχεία; @pantoken/web-components τυλίγει αυτά τα ίδια στυλ ως <instui-button>, <instui-alert>, <instui-badge>, <instui-avatar>, <instui-progress> και άλλα — δείτε τον χάρτη πακέτων.

Συμβάσεις

Οι συμβάσεις CSS σε αυτό το πακέτο βασίζονται σε μια τροποποιημένη έκδοση του RSCSS.

Οι τροποποιητές είναι κλειδί-τιμή — -<prop>-<val>, ευθυγραμμισμένοι με τα ονόματα props του InstUI — έτσι διαβάζονται από μόνα τους: -color-secondary, -size-sm, -shape-circle, -icon-plus. Τα boolean props είναι μόνο το όνομα του prop, όπου η παρουσία σημαίνει true (-has-shadow, -clickable); ένα boolean που είναι προεπιλεγμένο ενεργό και απενεργοποιείται αντιστρέφει (-without-background, -without-border). Τα μεγέθη δέχονται τόσο σύντομες όσο και μακρές ορθογραφίες (-size-sm = -size-small). Όταν ένα όνομα αποκλίνει από το InstUI, η σημασιολογική κλάση του InstUI εξακολουθεί να λειτουργεί αλλά είναι αποσυρμένη (π.χ. -variant-info → χρησιμοποιήστε -color-info).

Παράδειγμα

Συστατικό Instructure UI React:

<Alert variant="success" transition="fade" hasShadow renderCustomIcon={megaphone}>
  This is the alert content.
</Alert>

pantoken components:

<!-- direct instui props -->
<div
  class="instui-alert -variant-success instui-transition -fade-entered -has-shadow -render-custom-icon-megaphone"
>
  This is the alert content.
</div>

<!-- normalized color/icon props -->
<div
  class="instui-alert -color-success instui-transition -fade-entered -has-shadow -icon-megaphone"
>
  This is the alert content.
</div>

Για το prop timeout του InstUI, ορίστε την ακέραια προσαρμοσμένη ιδιότητα --timeout σε χιλιοστά του δευτερολέπτου και φορτώστε την αλληλεπίδραση Alert. Μια θετική τιμή προγραμματίζει την απόρριψη· 0 (η προεπιλογή) αφήνει το alert στη θέση του. Προσθέστε τις κλάσεις instui-transition -fade-entered της βοηθητικής transition για το fade του InstUI· παραλείψτε αυτές για άμεση αφαίρεση. Η αλληλεπίδραση χειρίζεται την κατάσταση -fade-exiting και εκπέμπει ένα ακυρώσιμο, φωλιαστικό συμβάν dismiss πριν την αφαίρεση, ώστε μια εφαρμογή να μπορεί να καλέσει preventDefault() για να κρατήσει το alert τοποθετημένο.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@pantoken/components/dist/utilities.css"
/>
<div
  class="instui-alert -color-info instui-transition -fade-entered"
  style="--timeout: 5000"
  role="alert"
>
  This alert dismisses after five seconds.
</div>
<script src="https://cdn.jsdelivr.net/npm/@pantoken/interactions/dist/alert.iife.js"></script>

Οι μπάρες προόδου δέχονται αυθαίρετες κλίμακες μέσω --min (0 από προεπιλογή), --value, και --max (100 από προεπιλογή), με αποσυρθέντες ψευδωνύμους --value-now και --value-max. Προσθέστε -should-animate για να εφαρμόσετε τη μισοδευτερόλεπτη μετάβαση του InstUI όποτε αλλάζει μια τιμή. .value στέκεται δίπλα σε .bar ως παιδί της ρίζας· προσθέστε -render-value-inside για να το αποδώσετε πάνω από την τροχιά, ευθυγραμμισμένο στην αρχή του, αντίθετα (στυλιζάρετέ το για ευανάγνωστοτητα έναντι του χρώματος του μέτρου). Χρησιμοποιήστε ένα φυσικό <progress> για εύρος με βάση το μηδέν και <meter> όταν το ελάχιστο δεν είναι μηδέν· τα web components επιλέγουν ανάμεσά τους αυτόματα από το min attribute. Το InstUI δεν έχει ασαφή κατάσταση, οπότε ένα <progress> που λείπει το value attribute είναι μια μόνο-για-pantoken καλύτερη εκτίμηση: progress-bar κινούμε .bar ως ολισθαίνον τμήμα και progress-circle περιστρέφει το δαχτυλίδι του σε ένα σταθερό τόξο, και τα δύο κρύβουν .value.

<label>
  Uploading Document:
  <progress
    class="instui-progress -color-brand -should-animate"
    style="--value: 40; --max: 60"
    value="40"
    max="60"
  >
    40 of 60
  </progress>
</label>

Οι κύκλοι προόδου δέχονται τις ίδιες αυθαίρετες κλίμακες μέσω --min, --value, και --max. --value-now και --value-max παραμένουν ως αποσυρθέντες λειτουργικοί ψευδώνυμοι. Προσθέστε -should-animate και φορτώστε το πακέτο focused interaction για να αναπαράγετε την ανύψωση (mount) του InstUI· --animation-delay είναι μια unitless καθυστέρηση σε χιλιοστά του δευτερολέπτου. Οι αποσυρθείσες ορθογραφίες -should-animate-on-mount και -shold-animate-on-mount παραμένουν λειτουργικά ψευδώνυμα.

<label for="upload-progress">Uploading Document</label>
<progress
  id="upload-progress"
  class="instui-progress-circle -should-animate"
  style="--value: 40; --max: 60; --animation-delay: 500"
  value="40"
  max="60"
>
  40 of 60
</progress>
<script src="https://cdn.jsdelivr.net/npm/@pantoken/interactions/dist/progress-circle.iife.js"></script>

Πρόθεμα κλάσης

Κάθε κλάση είναι ονοματοδοτημένη με namespace instui- από προεπιλογή. Δημιουργήστε ένα stylesheet με το δικό σας πρόθεμα — ή κανένα — περνώντας prefix σε οποιονδήποτε builder. Οποιαδήποτε ψευδής τιμή (null, undefined, "", ή η παράλειψή του) αφαιρεί τελείως το πρόθεμα, ώστε να μπορείτε να γράψετε class="heading -level-h1" αντί για class="instui-heading -level-h1":

import { componentsCss } from "@pantoken/components";

componentsCss({ prefix: "ui" }); // .ui-button
componentsCss({ prefix: null }); // .button, .alert — no prefix

Οι τροποποιητές που ξεκινούν με παύλα (.-color-secondary, .-level-h1) παραμένουν αμετάβλητοι σε κάθε περίπτωση. Τα stylesheets που παρέχει το πακέτο κρατούν το πρόθεμα instui.

Βάση

base.css είναι ένα opt-in reset που ορίζει προεπιλογές εγγράφου από τα tokens: box-sizing, ένα reset body, την επιφάνεια της σελίδας, το βασικό χρώμα κειμένου και γραμματοσειρά, color-scheme (ώστε τα light-dark() tokens και τα εγγενή controls να ακολουθούν το θέμα), και ένα βασικό link. Φορτώστε το μια φορά, πριν τα component και prose sheets, όταν το pantoken κατέχει τη σελίδα.

import "@pantoken/components/base.css";
import "@pantoken/components/components.css";

Παραλείψτε το όταν ενσωματώνετε συστατικά σε έναν host που ήδη θέτει το δικό του θέμα για html και body — το reset βάφει την επιφάνεια της σελίδας, οπότε δεν θέλετε να συγκρούεται με τον host. Ό,τι ορίζει χρησιμοποιεί χαμηλής ειδικότητας επιλεγείς :where(), έτσι οι δικοί σας κανόνες κερδίζουν πάντα.

base.css εφαρμόζει τη γραμματοσειρά του brand (font-family: var(--instui-font-family-base), με συστήματα fallback); για να την φορτώσετε, εισάγετε το opt-in fonts.css — @font-face κανόνες για Atkinson Hyperlegible Next, που δείχνουν στα woff2 που περιλαμβάνονται στο πακέτο. Είναι ξεχωριστό επειδή οι γραμματοσειρές είναι ~350 kB και η αυτο-φιλοξενία γραμματοσειρών είναι συνειδητή επιλογή.

import "@pantoken/components/base.css"; // applies the font (falls back to system without fonts.css)
import "@pantoken/components/fonts.css"; // loads the Atkinson Hyperlegible Next woff2s

Περιεχόμενο για ανάγνωστες οθόνης

Υπάρχει ένα κρυφό μήνυμα μετά από αυτή τη πρόταση.Μόνο οι αναγνώστες οθόνης το ανακοινώνουν.

<span class="instui-screen-reader-content">Only screen readers announce this.</span>

.instui-screen-reader-content κρύβει ένα στοιχείο οπτικά ενώ το διατηρεί στο δέντρο προσβασιμότητας — για labels και κείμενο κατάστασης που η τεχνολογία υποβοήθησης πρέπει να διαβάζει αλλά ο σχεδιασμός δεν πρέπει να δείχνει.

Βοηθητικά

utilities.css είναι ένα opt-in στρώμα από διασυνοριακές κλάσεις: ένα View πρωτότυπο, το spacing στην κλίμακα token, και σημασιολογικές υπερκαλύψεις χρωμάτων. Σε αντίθεση με τις κλάσεις -modifier των συστατικών, αυτές χρησιμοποιούν διπλή παύλα (--mod) ώστε να μην συγκρούονται ποτέ με τα ονόματα τροποποιητών ενός συστατικού, και εφαρμόζονται σε οποιοδήποτε στοιχείο — γυμνό, ή συντεθειμένο πάνω σε ένα component.

import "@pantoken/components/utilities.css";

Επιφάνεια accent-blue με κείμενο on-color.

Κεντραρισμένο με mx-auto.

<div class="instui-view --bg-accent-blue --text-on-color --p-md">…</div>
<div class="instui-view --bg-muted --p-sm --mx-auto">…</div>

View — .instui-view είναι το View του InstUI. Είναι η βάση πάνω στην οποία στρώνετε spacing και χρώμα, και φέρνει τροποποιητές κλειδί-τιμή για τα δικά του οπτικά props ώστε να μην χρειάζεται να απευθυνθείτε σε utilities: -background-* (οι επιφάνειές του), -border-radius-{small,medium,large,circle,pill}, -border-width-{small,medium,large} + -border-color-*, -shadow-{resting,above,topmost}, -display-*, -position-*, -overflow-x-*/-overflow-y-*, και -cursor-* — αυτά είναι οι δικοί του τροποποιητές με μια μονή παύλα, ασύνδετοι με τις διπλές παύλες των utilities παρακάτω. Οι props με ελεύθερη τιμή (width/height/inset) παραμένουν inline styles; margin/padding χρησιμοποιούν τα spacing utilities.

Spacing — κλάσεις ανά πλευρά στην κλίμακα spacing. Διαβάστε τις ως {m|p}{side}-{step}: m για margin ή p για padding (ή τις πλήρεις λέξεις margin/padding), μια προαιρετική λογική πλευρά, και μετά ένα βήμα. Έτσι .--m-lg και .--margin-lg είναι τα ίδια, όπως και .--pt-md και .--paddingt-md.

• Πλευρές: none (όλες), t/b (αρχή/τέλος block), s/e (αρχή/τέλος inline), x/y (άξονας inline/block). Οι λογικές πλευρές παραμένουν σωστές σε layouts από δεξιά προς αριστερά.
• Βήματα: 0, 2xs, xs, sm, md, lg, xl, 2xl, συν auto μόνο για margin.

Συνθέστε τα για το shorthand margin="small auto large" του InstUI: class="--mt-sm --mx-auto --mb-lg".

Χρώμα — σημασιολογικές υπερκαλύψεις που παραμένουν στην παλέτα: .--bg-<name> (φόντο), .--text-<name> (χρώμα κειμένου), και .--border-<name> (χρώμα περιγράμματος). Κάθε <name> είναι ένα σημασιολογικό token χρώματος — οι προθέσεις (base, brand, muted, success, warning, error, info, inverse, on-color, strong, …) συν την παλέτα accent-* (accent-blue, accent-green, κ.ο.κ.). Ένα όνομα υπάρχει μόνο αν το token υπάρχει σε εκείνη την οικογένεια, οπότε text-brand δεν είναι κλάση — το κείμενο δεν έχει token brand. Δεν υπάρχει τρόπος να προσπελάσετε ένα primitive ή ένα αυθαίρετο hex, και κάθε υπερκάλυψη ακολουθεί το θέμα.

Οικογένειες token — κάθε οικογένεια "ένα token, μια ιδιότητα" παίρνει μια κλάση ανά token, ονομασμένη μετά το token. Συνθέστε τα ελεύθερα:

• .--font-family-heading, .--font-family-code, … → font-family
• .--font-weight-body-strong, .--font-weight-interactive, … → font-weight
• .--line-height-* → line-height
• .--border-radius-md, .--border-radius-full, … → border-radius
• .--border-width-sm/-md/-lg → border-width
• .--opacity-base, .--opacity-disabled → opacity
• .--elevation-resting/-above/-topmost (και -depth1…-card) → box-shadow

Κάθε μία ορίζει μόνον την ιδιότητά της, επομένως border-width/border-radius χρειάζονται ένα border-* χρώμα και ένα στυλ περιγράμματος για να σχεδιάσουν πραγματικά ένα περίγραμμα. Αυτές χρησιμοποιούν το πλήρες όνομα token (.--border-radius-md), ενώ οι βοηθητικοί κανόνες χρώματος και spacing παραπάνω χρησιμοποιούν σύντομα ψευδώνυμα (.--bg-brand, .--mt-lg) — τα ψευδώνυμα είναι εργονομικά συντομεύσεις· οι κλάσεις token είναι κυριολεκτικές και εξαντλητικές.

Διάταξη — .--display-<value> (block, inline-block, inline, flex, inline-flex, none) και .--text-align-<value> (start, center, end, justify) καλύπτουν τα διασυνοριακά display και textAlign props του InstUI (View, Button, Metric, Tabs, …) ως συνθέσιμες κλάσεις — έτσι αυτά δεν είναι τροποποιητές ανά-συστατικό.

Κάθε κλάση με διπλή παύλα κερδίζει το cascade ντετερμινιστικά πάνω σε μια ομό-ονόματη τροποποιητή με μία παύλα, ανεξαρτήτως της σειράς εισαγωγής stylesheet — δείτε τις Συμβάσεις συγγραφής για τον μηχανισμό.

Όλα εδώ είναι καθαρό CSS που κινείται από τα --instui-* tokens, έτσι ακολουθεί το InstUI μέσω του στρώματος token. Δείτε το API reference για componentsCss και τους builders ανά συστατικό.

Επικάλυψεις: διάλογος και popover

Τα components επικάλυψης χρησιμοποιούν εγγενή primitives της πλατφόρμας, επομένως συμπεριφέρονται προσβάσιμα με λίγη ή και χωρίς JavaScript.

Modal — τοποθετήστε .instui-modal σε ένα εγγενές <dialog>. Παίρνει focus trapping, Esc-για-κλείσιμο, και ένα ::backdrop δωρεάν· το backdrop σκουραίνει με το ίδιο token --instui-component-mask-background-color όπως .instui-mask (προσθέστε -blur για frosted εμφάνιση). Ανοίξτε και κλείστε με invoker commands — χωρίς script:

<button class="instui-button" command="show-modal" commandfor="dlg">Open</button>
<dialog id="dlg" class="instui-modal">
  <div class="header">Title</div>
  <div class="body">…</div>
  <div class="footer">
    <button class="instui-button" command="close" commandfor="dlg">Close</button>
  </div>
</dialog>

Context view / popover — τοποθετήστε .instui-context-view σε ένα στοιχείο [popover] και εναλλαγή με popovertarget. Καβαλάει το πάνω στρώμα και κλείνει με ελαφριά απόρριψη σε κλικ έξω ή Esc, επίσης χωρίς script:

<button class="instui-button" popovertarget="cv">Details</button>
<div id="cv" popover class="instui-context-view">…</div>

Drawer layout — τοποθετήστε .instui-drawer-layout σε μια ρίζα διάταξης με .tray και .content παιδιά. Προσθέστε το attribute open (ή -open) για να αποκαλύψετε το tray, και χρησιμοποιήστε placement="end" (ή -placement-end) για να το ακουμπήσετε στην inline-end πλευρά — η τοποθέτηση επιλύεται μέσω λογικών ιδιοτήτων inset-inline-*/flex-direction, οπότε αναστρέφεται αυτόματα υπό dir="rtl" χωρίς επιπλέον κανόνες. Το focused interaction bundle προσθέτει δρομολόγηση Invoker εντολών και εναλλάσσει το overlay mode (should-overlay-tray) όταν το πλάτος διασχίζει --drawer-layout-min-width (προεπιλογή --instui-breakpoints-sm, τότε 30rem):

<button class="instui-button" command="--toggle" commandfor="drawer">Toggle panel</button>
<div id="drawer" class="instui-drawer-layout" open>
  <aside class="tray">…</aside>
  <main class="content" role="region">…</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/@pantoken/interactions/dist/drawer-layout.iife.js"></script>

Mask — .instui-mask μένει για εντός-ροής επικάλυψεις (ένα spinner πάνω σε μια κάρτα); το ::backdrop ενός modal καλύπτει την περίπτωση modal.

Και τα δύο μοτίβα τυλίγονται επίσης ως συμπεριφορικά custom elements στο @pantoken/web-components: <instui-modal open> (ένα <dialog> που κινείται από το open attribute του) και <instui-context-view> (ένας εγγενής popover).

Υποστήριξη περιηγητών: το popover API και popovertarget είναι Baseline 2024; οι invoker commands (command/commandfor) είναι Baseline 2025, οπότε σε παλαιότερους περιηγητές συνδέστε τα κουμπιά στο dialog.showModal() ως μια μονό-γραμμή fallback. Τοποθετώντας ένα popover δίπλα στο trigger του χρησιμοποιεί CSS anchor positioning όπου υποστηρίζεται (Chromium); αλλού κεντράρει στο πάνω στρώμα.

Φόρμες

FormField — .instui-form-field είναι ένα wrapper CSS-Grid που τοποθετεί ένα label, τον control, και τυχόν μηνύματα. Βάλτε το σε ένα <label> ώστε το label να συσχετίζεται εγγενώς με τον control. Έχει τρεις περιοχές grid — label, controls, messages:

<label class="instui-form-field">
  <span class="label">Email address</span>
  <span class="controls"><input class="instui-text-input" type="email" required /></span>
  <div class="instui-form-field-messages">
    <span class="instui-form-field-message -type-hint">We'll never share it.</span>
  </div>
</label>

-layout-stacked (προεπιλογή) στοιβάζει τις περιοχές· -layout-inline βάζει το label δίπλα στον control (ρυθμίστε με -label-align-{start,end} και -v-align-{top,middle,bottom}). -readonly επαναχρωματίζει το label.

Το αστερίσκο απαιτούμενου εμφανίζεται όταν το πεδίο απαιτείται από είτε την κλάση -required ή ένα εγγενές required control μέσα σε αυτό — οπότε μπορείτε απλώς να ορίσετε required στο input και το σημάδι εμφανίζεται. Είναι διακοσμητικό (ένα ::after στο label, εκτός του δέντρου προσβασιμότητας); συνοδέψτε το με μια σημείωση όπως "τα πεδία με * είναι υποχρεωτικά" εκτός αν η φόρμα είναι αυταπόδεικτη.

FormFieldGroup — .instui-form-field-group ομαδοποιεί σχετικά πεδία σε ένα <fieldset> με μια περιγραφή <legend>. Είναι καθαρή διάταξη (χωρίς ειδικά tokens): προεπιλογή στοιβάζει τα πεδία; -layout-columns / -layout-inline ρέουν αυτά σε responsive στήλες, με -row-spacing-* / -col-spacing-* και -v-align-* για να ρυθμίσετε το grid.

RadioInputGroup — .instui-radio-input-group είναι η ίδια <fieldset>/<legend> ομαδοποίηση, ειδικοποιημένη για radios. Επειδή τα παιδικά radios μοιράζονται ένα name, η επιλογή είναι εγγενώς μονο-επιλογής — οπότε ένα σετ toggle κουμπιών συμπεριφέρεται ως ένας έλεγχος, όχι ως χαλαρά κουμπιά. -variant-simple (προεπιλογή) τοποθετεί τα κανονικά ραδιόκουμπα (-layout-columns/-inline τα ρέουν σε μια σειρά); -variant-toggle συνδέει τα παιδικά .instui-radio.-variant-toggle κουμπιά σε ένα ενιαίο segmented control (συμπτυγμένα περιγράμματα, στρογγυλεμένα εξωτερικά άκρα):

<fieldset class="instui-radio-input-group -variant-toggle">
  <legend>T-shirt size</legend>
  <label class="instui-radio -variant-toggle"
    ><input type="radio" name="size" checked /> Small</label
  >
  <label class="instui-radio -variant-toggle"><input type="radio" name="size" /> Medium</label>
  <label class="instui-radio -variant-toggle"><input type="radio" name="size" /> Large</label>
</fieldset>

Μηνύματα — .instui-form-field-messages είναι ο container; κάθε .instui-form-field-message παίρνει ένα -type-*: -type-hint (γκρι, προεπιλογή), -type-error (κόκκινο κείμενο + glyph κύκλου-ειδοποίησης), -type-success (πράσινο κείμενο + glyph κύκλου-ελέγχου), και -type-screenreader-only (οπτικά κλιπ, εξακολουθεί να ανακοινώνεται). Τα glyphs βάφονται σε currentColor, οπότε ταιριάζουν πάντα με το χρώμα του μηνύματος. -type-new-error είναι ένα αποσυρθέν ψευδώνυμο του -type-error. Συνδέστε το container με τον control με aria-describedby, και ορίστε aria-invalid στον control όταν υπάρχει σφάλμα.

Μέσα σε ένα FormField, ένα -type-error μήνυμα ακολουθεί την επικύρωση στην πλευρά του πελάτη: παραμένει κρυφό μέχρι ο control του πεδίου να είναι :user-invalid (εγγενές, μετά τη αλληλεπίδραση του χρήστη) — ή το αναγκάσετε με -invalid στο .instui-form-field (για σφάλμα από διακομιστή). Ένα αυτόνομο .instui-form-field-messages (όχι μέσα σε πεδίο) δεν επηρεάζεται. Το focus ring του control ακολουθεί ανάλογα: danger όταν :user-invalid/-invalid, επιτυχία στο -success.

Κείμενα ελέγχου — .instui-text-input (εγγενές <input>), .instui-text-area (εγγενές <textarea>, με δυνατότητα αλλαγής μεγέθους), και .instui-simple-select (εγγενές <select> με caret) μοιράζονται μια εμφάνιση και τις ίδιες καταστάσεις: -invalid (περιθώριο λάθους), -success (περιθώριο επιτυχίας), -readonly, εγγενές :disabled, και -size-{sm,md,lg}. Για ένα leading/trailing icon (το InstUI renderBeforeInput/renderAfterInput), τυλίξτε το input σε .instui-input-group και προσθέστε μια υποδοχή .before/.after (ένα glyph -icon-*); -should-not-wrap το κρατάει σε μια γραμμή. .instui-number-input είναι αυτό το facade συν μια στήλη spinner +/- .arrows (εγγενές type="number"; συνδέστε τα κουμπιά με stepUp()/stepDown()). .instui-range-input είναι ένα στιλιζαρισμένο input[type="range"] της τιμής του οποίου αποδίδεται σε μια .instui-range-input-value αντίστροφη φούσκα. Για ένα πλούσιο combobox με μια listbox popover, επιλέξτε @instructure/ui — αυτή η βιβλιοθήκη καλύπτει τα εγγενή controls.

Στυλιζαρισμένο select dropdown (πειραματικό) — ένα opt-in select.css αναβαθμίζει το ίδιο στοιχείο .instui-simple-select: στιλιζάρει το ανοιχτό dropdown (το panel και κάθε επιλογή, με hover και επιλεγμένες καταστάσεις) χρησιμοποιώντας το μοντέλο CSS Customizable Select.

WARNING

select.css βασίζεται σε appearance: base-select / ::picker(select), τα οποία είναι πειραματικά (Chrome 135+, όχι ακόμα Baseline). Παραδίδεται ως ξεχωριστό opt-in φύλλο και κάθε κανόνας είναι ελεγχόμενος πίσω από @supports (appearance: base-select), οπότε δεν κάνει τίποτα σε μη υποστηριζόμενους περιηγητές — ο .instui-simple-select control απλώς παραμένει το απλό εγγενές select. Φορτώστε το μόνο αν θέλετε το βελτιωμένο dropdown και αποδέχεστε την περιορισμένη υποστήριξη.

import "@pantoken/components/components.css";
import "@pantoken/components/select.css"; // opt-in, experimental: styles the open dropdown